无法使用webpack加载scss

现代化者

我正在使用webpack,我想在我的JavaScript中加载scss文件。(或者如果可以分开,也可以)。

这是我的webpack配置:

"use strict";
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
    context: __dirname + '/src',
    entry: './js/index.js',
    output: {
        path: './build',
        filename: 'js/app.bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.scss$/,
                loaders: ["style", "css", "sass"]
            }
        ]
    },
    resolve: {
        root: [
            path.resolve('./src/js'),
            path.resolve('./src/scss')
        ],
        extensions: ['', '.js']
    },
    plugins: [
        new CopyWebpackPlugin([
            { from: 'html/**', to: `${__dirname}/build/html`, flatten: true },
            { from: 'images/**', to: `${__dirname}/build/image`, flatten: true }
        ])
    ]
};

这是我的文件列表:

  • src / html / index.html-> build / html / index.html(已解决)
  • src / images / **-> build / images / **(工作)
  • src / js / index.js-> build / js / app.bundle.js(已解决)
  • src / scss / **-> build / css / ** (无效)

这是我的JavaScript代码。我刚刚开始项目,因此没有太多代码:

import "babel-polyfill";
import React from 'react';
import ReactDOM from 'react-dom';
import moduleA from 'moduleA';
import "view/startup.scss";

ReactDOM.render(
    <div>
        <h1>Helloworld!</h1>
    </div>,
    document.getElementById('entry')
);

您可以看到以下内容:import“ view / startup.scss”; 我想将scss文件加载到我的JavaScript中,但是当我运行webpack命令时,它说:

加载程序/Users/.../Desktop/work/my-project/app/node_modules/css/index.js中的错误未返回函数@ ./scss/view/startup.scss 4:14-123

在webpack config的“ resolve”属性中,您可以看到我为scss添加了另一个根目录,也加载了sass-loader,但是它不起作用,我也不知道为什么。

据我所知,使用Webpack时,包括css / scss在内的文件会自动注入到目标文件中,因此,不必将其提取为单独的文件也没关系,我只希望它能起作用。

任何帮助将不胜感激:)

*更新* ./scss/view/startup.scss的代码

#startup {
    background-color: #7087d7;
}
罗伯特克莱普

错误指向原因(我着重强调了相关部分):

加载程序/Users/.../Desktop/work/my-project/app/node_modules/ css / index.js中的错误未返回函数@ ./scss/view/startup.scss 4:14-123

在Webpack中声明加载程序时,如果没有其他可能与无后缀加载程序名称匹配的模块,则可以省略-loader后缀(css-loader变为css

这就是您失败的地方,因为您还使用了cssWebpack尝试将其用作加载程序软件包(并且失败了,因为不是)。

要解决此问题,请使用完整的加载程序包名称:

 loaders : [ "style-loader", "css-loader", "sass-loader" ]

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

无法使用Aurelia,Scss和Webpack加载Fontawesome字体

来自分类Dev

无法使用Webpack加载超棒的字体

来自分类Dev

Webpack:无法使用url()导入加载CSS

来自分类Dev

无法使用 webpack 覆盖加载 .styl

来自分类Dev

使用Webpack编译Scss

来自分类Dev

使用webpack处理scss

来自分类Dev

Webpack:图像无法加载

来自分类Dev

网页加载之前的Webpack SCSS“闪烁”

来自分类常见问题

如何使用相对路径在Webpack中使用SCSS(SASS)加载超棒的字体?

来自分类Dev

无法使用Webpack加载png文件,意外字符

来自分类Dev

即使使用适当的加载器,Webpack也无法处理JSX

来自分类Dev

无法使用Webpack加载ES6模块

来自分类Dev

无法让Webpack热加载器与React一起使用

来自分类Dev

使用带有 webpack 的 angularjs 时无法加载 html 文件

来自分类Dev

使用_(下划线)时,Webpack别名无法解析SCSS部分

来自分类Dev

webpack无法加载模块jquery

来自分类Dev

Webpack无法加载png图像

来自分类Dev

SCSS变量无法跨文件加载

来自分类Dev

自动前缀加载器中断Webpack中的scss编译

来自分类Dev

使用Webpack动态加载PapaParse

来自分类Dev

使用Webpack + Typescript加载AmCharts

来自分类Dev

Webpack CSS加载器无法构建

来自分类Dev

Webpack:无法解析模块“文件加载器”

来自分类Dev

Webpack无法加载背景图片

来自分类Dev

Webpack较少的加载器无法正常工作

来自分类Dev

为什么webpack无法加载块?

来自分类Dev

无法使用Webpack加载spfx解决方案的sp-loader

来自分类Dev

无法使用webpack-4文件加载器导入字体

来自分类Dev

无法使用 webpack 中的 babel-loader 加载 stage-3 javascript 文件