Question

只需使用webpack设置我的一个项目，第一次使用它就可以了。

基本上我已经将SCSS编译成CSS，但是以前使用grunt时，有sourcemap设置，如果您正在检查元素，它将显示什么.scss文件，即使该元素被从中拉出被编译成CSS文件。

这是我的webpack配置：

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

根据sass-loader文档：'您需要将sourceMap选项传递给sass-loader 和。

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

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

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

来自已编译的CSS的Webpack 4 Sourcemap SCSS

2 个答案: