sass-loader 生成损坏的源映射

Question

在我的项目中，我包含一个 CSS 文件和一个 SCSS 文件：

require('./../vendor/glyphicons/glyphicons.css');
require('./../css/main.scss');

CSS 的源映射 - 工作正常：

{
    test: /\.css$/,
    loader: ExtractTextPlugin.extract({
        loader: ['css-loader?sourceMap']
    })
}

SCSS - 损坏 的源映射（所有规则都指向同一行，指向父元素 - body）

{
    test:   /\.scss$/,
    loader: ExtractTextPlugin.extract({
        loader: ['css-loader?sourceMap', 'postcss-loader', 'sass-loader?sourceMap']
    })
}

编辑：我知道我不是唯一拥有此problem 的人。

Answer 1

{
  test: /\.s?css$/,
  exclude: /node_modules/,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        sourceMap: true,
      },
    },
    {
      loader: 'css-loader',
      options: {
        sourceMap: true,
      },
    },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: true,
        outputStyle: 'compressed', // This fixed the source maps
      },
    },
  ],
},

编辑：我在生产中使用devtool: 'source-map'，在开发中使用devtool: 'cheap-eval-source-map'。

我还没有完全理解起作用的力量，但是如果您希望让您的 scss 源映射指向具有正确行号的 @import 文件，则此方法可行。

行号不正确的原因，就我而言，我注意到 sass 符合类似

body {
   background: black;
}

到

body {
   background: black; }