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 ./~/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.

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

Unzip this then run:

npm install
webpack

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

And the index.js entry file:

require('./styles.scss');

alert('foo bar baz');

And the styles.scss file:

body {
  background-color: #000;
}

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

:(

Information about my environment:

node - 0.12.4
npm  - 2.10.1
os   - OS X Yosemite

score 23 · Accepted Answer · answered Jun 26 '15 at 10:00

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.

I'm sure most will know this, but as I was using an includePaths already this is how I added sourceMap { test: /\.scss$/, loader: 'style!css!sass-loader?' + JSON.stringify({ includePaths: [ path.resolve(__dirname, "app/design/_sass") ], sourceMap : true }) },` — MichaelStoner, Jun 30 '15 at 13:01
I just find it a bit sad that it's necessary to do weird stuff like this to get it working. Worked for me after applying the fix, so thanks for posting the answer, but still makes me cringe. — hendrikswan, Jul 03 '15 at 21:09

score 5 · Answer 2 · answered Jun 19 '15 at 20:51

5

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.

answered Jun 19 '15 at 20:51

chriserik

159
2

1

Looks like these lines have become part of loader.js in the distributed version. – Micros Oct 16 '15 at 15:27

score 0 · Answer 3 · answered Oct 13 '16 at 15:41

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

As of Webpack 2 custom properties are not allowed :\ you'll need to pass the option within the plugin or the loader: — Dylan Pierce, Mar 09 '17 at 14:19

Sass loader not working in webpack

3 Answers3

Linked