Sass loader不能在webpack中工作

我正在尝试获取* .scss文件在我的webpackconfiguration中受支持，但是当我运行webpack构build命令时，我不断收到以下错误：

ERROR in ./~/css-loader!./~/sass-loader!./app/styles.scss Module build failed: TypeError: Cannot read property 'sections' of null at new SourceMapConsumer (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/node_modules/source-map/lib/source-map/source-map-consumer.js:23:21) at PreviousMap.consumer (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/previous-map.js:37:34) at new Input (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/input.js:42:28) at parse (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/parse.js:17:17) at new LazyResult (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:54:47) at Processor.process (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/processor.js:30:16) at processCss (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/lib/processCss.js:168:24) at Object.module.exports (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/lib/loader.js:21:15) @ ./app/styles.scss 4:14-117 

我不能为了我的生活找出原因。 这是一个非常基本的设置。

我已经创build了一个最低限额的Dropbox共享，说明了这一点： https : //www.dropbox.com/s/quobq29ngr38mhx/webpack.sass.test.zip?dl=0

解压缩然后运行：

 npm install webpack 

这是我的webpack.config.js文件：

 var path = require('path') var webpack = require('webpack') module.exports = { devtool: 'eval', entry: [ './app' ], output: { path: path.join(__dirname, 'dist'), filename: 'index.js', publicPath: '/dist/' }, plugins: [ new webpack.NoErrorsPlugin() ], resolve: { extensions: ['', '.js'] }, module: { loaders: [{ test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader' }] } } 

和index.js条目文件：

 require('./styles.scss'); alert('foo bar baz'); 

和styles.scss文件：

 body { background-color: #000; } 

它似乎遵循sass-loader文档站点的build议，但我无法运行它。

🙁

有关我的环境的信息：

 node - 0.12.4 npm - 2.10.1 os - OS X Yosemite 

Answer 1

我设法得到另一个解决方法，不涉及编辑npm_modules目录中的css-loader库（根据@chriserik的回答）。

如果将“？sourceMap”添加到sass加载器，则css加载器似乎处理输出。

这是我更新的configuration：

 var path = require('path') var webpack = require('webpack') module.exports = { devtool: 'eval', entry: [ './app' ], output: { path: path.join(__dirname, 'dist'), filename: 'index.js', publicPath: '/dist/' }, plugins: [ new webpack.NoErrorsPlugin() ], resolve: { extensions: ['', '.js'] }, module: { loaders: [{ test: /\.scss$/, loader: 'style!css!sass?sourceMap' }] } } 

PS我甚至扩大了这个testing，包括罗盘混合包括，这也工作。

Answer 2

遇到同样的问题后，我发现这个： https ： //github.com/webpack/css-loader/issues/84

显然，现在的解决scheme是手动修改/node_modules/css-loader/lib/loader.js的第17-19行

 if(map && typeof map !== "string") { map = JSON.stringify(map); } 

这为我解决了这个问题。

Answer 3

通过将source-map选项设置为true可以解决问题（如其他答案所示）。

但是如果在查询string中发现混乱的传递选项，还有一个select;

为了configurationsass加载器，你可以在webpackconfiguration对象中创build一个sassLoader属性：

 module.exports = { devtool: 'eval', entry: [ './app' ], output: { path: path.join(__dirname, 'dist'), filename: 'index.js', publicPath: '/dist/' }, plugins: [ new webpack.NoErrorsPlugin() ], resolve: { extensions: ['', '.js'] }, module: { loaders: [{ test: /\.scss$/, loader: 'style!css!sass' // loader: ExtractPlugin.extract('style', 'css!sass'), }] }, sassLoader: { sourceMap: true }, }