如何使用WebPack在index.js中包含SASS文件

Question

这是我的webpack配置文件

var path = require('path');
var MDC_DIR = path.resolve(__dirname, 'node_modules', '@material');
module.exports = {
    entry: "./index.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /.js$/,
                loader: "babel-loader",
            },
            {
                test: /.scss$/,
                loader: "sass-loader!style-loader!css-loader",
                include: [
                    MDC_DIR
                ],
            }
        ],
    }
};

这是我的index.js文件

import * as mdc from 'material-components-web';
require('material-components-web/material-components-web.scss');

当我运行WebPack时，它会引发以下错误：

ERROR in ./~/material-components-web/material-components-web.scss
Module parse failed: /Users/Me/project/mdc-babel-attempt/node_modules/material-components-web/material-components-web.scss Unexpected character '@' (17:0)
You may need an appropriate loader to handle this file type.
| //
|
| @import "@material/animation/mdc-animation";
| @import "@material/button/mdc-button";
| @import "@material/card/mdc-card";
 @ ./index.js 9:0-63

这让我认为它不是通过装载机。

我什至尝试过没有运气的require('sass-loader!style-loader!css-loader!material-components-web/material-components-web.scss');：

ERROR in ./~/sass-loader/lib/loader.js!./~/style-loader!./~/css-loader!./~/material-components-web/material-components-web.scss
Module build failed:
//
^
      Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"
      in /Users/Me/project/mdc-babel-attempt/node_modules/material-components-web/material-components-web.scss (line 1, column 1)
 @ ./index.js 9:0-99

现在尝试这样做一个星期，请提供帮助。预先感谢。

Answer 1

您在规则中包含的MDC_DIR不匹配实际模块。该模块是material-components-web(就像您导入的一样，如错误所示(，但是您仅适用于@material的规则。您可以完全删除include选项，因为您始终需要处理SASS文件才能与WebPack一起使用。

另一个问题是您的加载程序订单是错误的。在您的情况下，装载机以相反的顺序(从右到左(施加：

css-loader -> style-loader -> sass-loader

您绝对希望在css-loader之前应用sass-loader，因为它会将SASS转换为CSS，否则它将在任何无效CSS的SASS语法上出错。即使您仅使用CSS语法(没有额外的SASS功能(，您也会出现错误，因为style-loader将CSS转换为JavaScript，并且将其传递给sass-loader。sass-loader期望SASS和JavaScript不是有效的SASS语法，因此会丢弃错误。

您的规则应为：

{
    test: /.scss$/,
    loader: "style-loader!css-loader!sass-loader",
}

或使用NOTER WebPack 2语法：

{
    test: /.scss$/,
    use: ["style-loader", "css-loader", "sass-loader"],
}