Sass 加载器在 webpack 中不起作用

Posted 2023-02-22

【中文标题】Sass 加载器在 webpack 中不起作用

【英文标题】：Sass loader not working in webpack

【发布时间】：2015-09-05 02:37:07

【问题描述】：

我正在尝试让我的 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

【问题讨论】：

我也有同样的问题

【参考方案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'
    ]
  

附：我什至扩展了这个测试以包含一个 compass-mixins，这也很有效。

【讨论】：

我相信大多数人都会知道这一点，但由于我已经使用了 includePaths，这就是我添加 sourceMap test: /\.scss$/, loader: 'style!css!sass-装载机？ + JSON.stringify( includePaths: [ path.resolve(__dirname, "app/design/_sass") ], sourceMap : true ) ,`

我只是觉得有必要做这样奇怪的事情来让它工作有点难过。应用修复后为我工作，所以感谢发布答案，但仍然让我畏缩。

【参考方案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);

这解决了我的问题。

【讨论】：

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

【参考方案3】：

通过将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
  ,

【讨论】：

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