Javascript sass加载程序生成断开的源映射

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

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

CSS的源映射-工作正常：

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

SCS的源映射-已断开（所有规则指向同一行，指向父元素-

正文

）

编辑：我发现我不是唯一一个有这个的人

编辑：我在生产中使用

devtool:“源代码映射”

，在开发中使用

devtool:“廉价评估源代码映射”

我还不能完全理解其中的力量，但是如果你想让你的scss源代码映射指向带有正确行号的

@import

文件，这是可行的

行号不正确的原因是，在我的例子中，我注意到sass符合如下要求

body {
   background: black;
}

到

---

只有代码的答案没有太大帮助，请尝试解释您的代码。

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

body {
   background: black;
}

body {
   background: black; }