Sass 加载器在 webpack 中不起作用 [英] Sass loader not working in webpack

问题描述

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

I am trying to get *.scss files to be supported in my webpack configuration but I keep getting the following error when I run the webpack build command:

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

我终其一生都无法弄清楚原因.这是一个非常基本的设置.

I can't for the life of me figure out why. It's a very basic setup.

我创建了一个最低限度的保管箱共享来说明这一点:https://www.dropbox.com/s/quobq29ngr38mhx/webpack.sass.test.zip?dl=0

I have created a dropbox share with the bare minimum illustrating this: https://www.dropbox.com/s/quobq29ngr38mhx/webpack.sass.test.zip?dl=0

解压后运行:

npm install
webpack

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

Here is my webpack.config.js file:

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 入口文件:

And the index.js entry file:

require('./styles.scss');

alert('foo bar baz');

和styles.scss文件:

And the styles.scss file:

body {
  background-color: #000;
}

它似乎遵循了 sass-loader 文档站点的建议，但我无法让它运行.

It appears to follow the recommendations of the sass-loader documentation site, but I can't get it to run.

:(

有关我的环境的信息:

node - 0.12.4
npm  - 2.10.1
os   - OS X Yosemite

推荐答案

我设法找到了另一种解决方法，它不涉及编辑 npm_modules 目录中的 css-loader 库(根据 @chriserik 的回答).

I have managed to get another workaround working that doesn't involve editing the css-loader libraries within my npm_modules directory (as per the answer by @chriserik).

如果您将?sourceMap"添加到 sass 加载器，则 css 加载器似乎会处理输出.

If you add '?sourceMap' to the sass loader the css loader seems to handle the output.

这是我更新的配置:

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 包含，这也有效.

P.S. I even expanded this test to include a compass-mixins include, and this worked too.

这篇关于Sass 加载器在 webpack 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！