21

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
1
  • I've got the same issue
    – dreampulse
    Jun 19, 2015 at 8:04

3 Answers 3

23

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.

2
  • 1
    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 }) },` Jun 30, 2015 at 13:01
  • 2
    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. Jul 3, 2015 at 21:09
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.

1
  • 1
    Looks like these lines have become part of loader.js in the distributed version.
    – Micros
    Oct 16, 2015 at 15:27
0

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
  },
}
1
  • As of Webpack 2 custom properties are not allowed :\ you'll need to pass the option within the plugin or the loader: Mar 9, 2017 at 14:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.