Webpack SASS-loader include 语句中断 SASS @import statemetns [英] Webpack SASS-loader include statement breaks SASS @import statemetns
问题描述
所以对于背景,我最初在我的 Webpack 配置中排除了 node_modules 目录,这对于我的 sass @import 语句来说工作正常,但是很难包含 node_modules 目录中的内容.于是我把 SASS loader 改成了下面的
So for background originally I was excluding the node_modules directory in my Webpack config, which was working fine for my sass @import statements, but made it very difficult to include things from the node_modules directory. So I switched the SASS loader to the following
{
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 文件之一时,我都会遇到以下错误:
Please also note I tried with and without the trailing slash on client. All my src files including the sass files are in ./src/client directory including sub-directories. The problem now is when I run Webpack all my import statements are no longer functional. and I end up with the following error whenever I try to import one of my own sass files:
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 语句一切正常,但我知道这不是一个好方法.作为参考,我还包含了我的配置中的解析语句:
If I comment out the include statement all is well, but I know this is not a good approach. For reference I have also included my resolve statement from my config:
// 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"
}
}
推荐答案
所以我想我解决了这个问题
So I think I solved this
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 文件存储在多个目录中时,这是否是最有效的方法.
One thing I am still curious about is whether this is the most efficient approach, when sass files are stored in multiple directories.
这篇关于Webpack SASS-loader include 语句中断 SASS @import statemetns的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!