Sass加载器不在webpack中工作

Question

我试图在我的webpack配置中获得*.scss文件,但是当我运行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

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

我创建了一个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文档站点的建议,但我无法运行它.

:(

有关我的环境的信息:

node - 0.12.4
npm  - 2.10.1
os   - OS X Yosemite

Answer 1

我设法得到另一种解决方法,不涉及在我的npm_modules目录中编辑css-loader库(根据@chriserik的答案).

如果你将'？sourceMap'添加到sass加载器,css加载器似乎处理输出.

这是我更新的配置:

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我甚至扩展了这个测试,包括一个指南针混合包含,这也有效.

Answer 2

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

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

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

这解决了我的问题.