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

  ],
};

回答1:

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

回答2:

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

来源：https://stackoverflow.com/questions/51060937/webpack-4-sourcemap-scss-from-compiled-css

标签

Webpack

webpack-4