如何在带有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，因为它将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",
}

或者使用更好的webpack 2语法：

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