因此,对于背景,最初我在 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'
},
另请注意,我在客户端上尝试过使用或不使用尾部斜杠。
我的所有 src 文件(包括 sass 文件)都位于 ./src/client 目录(包括子目录)中。现在的问题是,当我运行 Webpack 时,所有导入语句都不再起作用。每当我尝试导入我自己的 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"
}
}