sass-loader generates broken source maps

懵懂的女人 提交于 2019-12-24 07:58:33

问题


In my project I'm including one CSS file and one SCSS file:

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


Source map for CSS - works fine:

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


Source map for SCSS - broken (all rules point to same line, to parent element - body)

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


EDIT: I see I'm not the only one having this problem.


回答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
      },
    },
  ],
},

EDIT: I'm usinge devtool: 'source-map' in production and devtool: 'cheap-eval-source-map' in development.

I don't fully understand the forces at play quite yet, but if you are looking to have your scss source maps point to the @import files with proper line numbers, this works.

The reason the line numbers are incorrect, in my case, I noticed sass complies something like

body {
   background: black;
}

to

body {
   background: black; }


来源:https://stackoverflow.com/questions/40784122/sass-loader-generates-broken-source-maps

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!