Webpack 4 Sourcemap SCSS from compiled css

Question

Just setting up one of my projects with webpack, first time using it so just getting my head around it.

Basically i've got the SCSS compiling into CSS, but previously when I was using grunt there was sourcemap setting where if you're inspecting the element it would show you what .scss file the element was being pulled from even though it was compiled into a CSS file.

Here is my webpack config:

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

module.exports = {
  mode: 'development',
  context: __dirname +"/src",
  devtool: 'source-map',
  entry: {
    head: __dirname + "/src/themes/pixellabs/js/head/head.js",
    styles: __dirname + "/src/themes/pixellabs/scss/styles.scss",
    foot: __dirname + "/src/themes/pixellabs/js/foot/foot.js",
  },
  output: {
    path: __dirname + "/src/themes/pixellabs/js/",
    filename: "[name].min.js"
  },
  watchOptions: {
    aggregateTimeout: 300 // The default
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].css',
              outputPath: '../css/'
            }
          },
          {
            loader: 'extract-loader'
          },
          {
            loader: 'imports-loader'
          },
          {
            loader: 'css-loader',
            options: { minimize: true }
          },
          {
            loader: 'postcss-loader'
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      },
      {
        test: /\.(png|jpg|svg)/,
        use: [
          {loader: "url-loader"}
        ]
      }
    ],
  },
  plugins: debug ? [] : [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    }),
    new webpack.optimize.UglifyJsPlugin({
      mangle: false,
      sourcemap: true
    }),

  ],
};

Answer 1

https://github.com/webpack-contrib/sass-loader#source-maps

module: {
        rules: [{
            test: /\.scss$/,
            use: [{
                loader: "style-loader"
            }, {
                loader: "css-loader", options: {
                    sourceMap: true
                }
            }, {
                loader: "sass-loader", options: {
                    sourceMap: true
                }
            }]
        }]
    }