Webpack SASS-loader include statement breaks SASS @import statemetns

问题

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'
},

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

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"
    }
}

回答1:

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')]
}

One thing I am still curious about is whether this is the most efficient approach, when sass files are stored in multiple directories.

来源：https://stackoverflow.com/questions/34297075/webpack-sass-loader-include-statement-breaks-sass-import-statemetns

标签

Sass

Webpack

sass-loader