Webpack中的Sass加载器未能工作

Question

Webpack中的Sass加载器未能工作

21

我正在尝试在webpack配置中支持*.scss文件，但是当我运行webpack构建命令时，我不断收到以下错误：

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

- ctrlplusb

我遇到了同样的问题。 - dreampulse

3个回答

5

在面对同样的问题后，我找到了这个解决方案：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);
}

这对我来说解决了问题。

- chriserik

1

看起来这些行已经成为分布版本中loader.js的一部分了。 - Micros

0

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

但是，如果您发现在查询字符串中传递选项很混乱，则有另一种选择；

要配置sass加载器，您可以在webpack配置对象中创建一个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
  },
}

- maioman

从Webpack 2开始，不允许使用自定义属性：\n 你需要在插件或加载器中传递选项： - Dylan Pierce

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ctrlplusb · Accepted Answer

我已经成功地找到了另一个解决方法，不需要编辑我的npm_modules目录中的css-loader库（如@chriserik所回答的那样）。

如果在sass loader中添加'?sourceMap'参数，则css loader可以处理输出结果。

这是我的更新后的配置：

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

附注：我甚至扩展了这个测试，包括一个罗盘混入的引用，它也起作用了。