Make SCSS sourcemaps work in Webpack 2 using extract-text-webpack-plugin?

Question

I'm starting to configure my first Webpack v2 task manager. This is the first time I'm using Webpack.

I'm using extract-text-webpack-plugin to have an external CSS file.

My problem is that I don't know how to setup sourcemaps for my SCSS file.

Is anyone have a solution for that ?

Thanks a lot!

Here is my Webpack.config.js file :

var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var WebpackBuildNotifierPlugin = require('webpack-build-notifier');
var path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader','postcss-loader','sass-loader'],
          publicPath: '/dist',
        })
      }
    ]
  },
  devtool: 'source-map',
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Project Demo',
      minify: {
        collapseWhitespace: false
      },
      hash: true,
      template: './src/index.html'
    }),
    new WebpackBuildNotifierPlugin({
      sound: false,
      suppressSuccess: false
    }),
    new BrowserSyncPlugin({
      server: path.resolve(__dirname, 'dist')
      // proxy: {
      //   target: 'http://localhost:3000',
      //   ws: true
      // }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: true,
      options: {
        postcss: [
          autoprefixer({
            browsers: ['last 4 version', 'Explorer >= 10', 'Android >= 4']
          })
        ]
      }
    }),
    new ExtractTextPlugin({
      filename:'app.css',
      disable:false,
      allChunks:true
    })
  ]
}

score 6 · Answer 1 · answered Mar 20 '17 at 15:19

6

You need to enable sourceMap in sass-loader and css-loader as shown in sass-loader Source maps. Your .scss rule would look like this:

{
  test: /\.scss$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      { loader: 'css-loader', options: { sourceMap: true } },
      'postcss-loader',
      { loader: 'sass-loader', options: { sourceMap: true } },
    ],
    publicPath: '/dist',
  })
}

answered Mar 20 '17 at 15:19

Michael Jungo

31,583
3
91
84

I was having a lot of trouble figuring out how to pass the `sourceMap` property to the loaders, so thanks for this! – Kendall Jun 05 '17 at 02:17

score 3 · Answer 2 · answered May 19 '17 at 08:58

I had the same problem as OP and based on Michael Jungos suggestion I found that the following snippet worked out. Basically I used the snippet provided by Michael but I had to extend the postcss-loader-line a bit and then i omitted publicPath: '/dist'.

Finally my solution looks like this:

{ test: /\.(scss|css)$/, loader: extractTextPlugin.extract({ fallback: 'style-loader', use: [ {loader: 'css-loader', options: {sourceMap: true}}, {loader: 'postcss-loader', options: {sourceMap: 'inline'}}, {loader: 'sass-loader', options: {sourceMap: true}} ] }) }

Make SCSS sourcemaps work in Webpack 2 using extract-text-webpack-plugin?

2 Answers2