CODEWITHSUNDEEP
webpackwebpack-4
Anish Joshi
Anish Joshi

Reputation: 63

Webpack 4 Sourcemap SCSS from compiled css

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

  ],
};

Upvotes: 3

Views: 4422

Answers (2)

PlayMa256
PlayMa256

Reputation: 6831

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

Upvotes: 3

joknawe
joknawe

Reputation: 1540

According to sass-loader documentation: 'you'll need to pass the sourceMap option to the sass-loader and the css-loader.

{ loader: 'css-loader', options: { minimize: true, sourceMap: true } }

https://github.com/webpack-contrib/sass-loader/blob/master/README.md

Upvotes: 1

Related Questions