Question

因此，对于后台原本，我在我的Webpack配置中排除了node_modules目录，这对我的sass @import语句工作正常，但是很难从node_modules目录中包含东西。所以我将SASS加载程序切换到以下

{
            test: /\.scss$/,
            include: [path.resolve(__dirname, "/src/client"), path.resolve(__dirname, "/node_modules/angular-material/")],
            loader: 'style-loader!css-loader!autoprefixer-loader!sass-loader'
},

请注意我在客户端上使用和不使用斜杠。包括sass文件在内的所有src文件都在./src/client目录中，包括子目录。现在的问题是当我运行Webpack时，我的所有import语句都不再起作用。每当我尝试导入我自己的一个sass文件时，我最终会得到以下错误：

ERROR in ./src/client/app/app.scss
Module parse failed:   /Users/mikedklein/development/vncuxf/src/client/app/app.scss Line 1:    Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
| @import 'common/common';
| @import 'general';
|
@ ./src/client/app/app.module.es6 85:0-21

如果我注释掉include语句一切都很好，但我知道这不是一个好方法。作为参考，我还从我的配置中包含了我的解析声明：

// Resolves so require statements don't need extentions
resolve: {
    extensions: ['', '.js', '.es6', '.scss', '.css', '.html', '.json'],
    alias: {
      angular_material_scss: __dirname + "/node_modules/angular-material/angular-material.scss"
    }
}

Answer 1

所以我想我解决了这个问题

module: {
    loaders: [
        {
            test: /\.(es6|js)$/,
            exclude: /node_module/,
            loader: 'babel-loader'
        },
        {
            test: /\.css$/,
            exclude: /node_modules/,
            loader: 'style-loader!css-loader!autoprefixer-loader'
        },
        {
            test: /\.scss$/,
            loader: 'style-loader!css-loader!autoprefixer-loader!sass loader'
        }
    ]
},
// This is the key need to have include paths in the sass loader option.
sassLoader: {
  includePaths: [path.resolve(__dirname, './src/app'), path.resolve(__dirname, '/node_modules/angular-material')]
}

我仍然很好奇的一件事是，当sass文件存储在多个目录中时，这是否是最有效的方法。

Webpack SASS-loader包含语句中断SASS @import statemetns

1 个答案: