sass-loader生成破碎的源地图

时间:2016-11-24 10:35:23

标签: javascript sass webpack webpack-2 sass-loader

在我的项目中,我包含一个CSS文件和一个SCSS文件:

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


CSS的源地图 - 工作正常

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

enter image description here


SCSS - 已损坏的源地图(所有规则指向同一行,指向父元素 - body

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

enter image description here


编辑:我发现我并不是唯一拥有problem的人。

1 个答案:

答案 0 :(得分: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; }