Sass loader not working in webpack

Question

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         


        

Answer 1

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).

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

Here is my updated 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'
    }]
  }
}

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

Answer 2

The problem is solved by setting source-map option to true (as seen in other answers).

But in case you find messy passing options in the query string there is an alternative;

for configuring the sass loader you can create a sassLoader property in the webpack config object:

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
  },
}

Answer 3

After having the same issue, I found this: https://github.com/webpack/css-loader/issues/84

Apparently, the solution for now is to manually modify lines 17-19 of /node_modules/css-loader/lib/loader.js with

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

This fixed the problem for me.