sass-loader生成破碎的源映射 [英] sass-loader generates broken source maps

问题描述

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

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

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

CSS的源地图-工作正常:

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

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

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.

推荐答案

{
  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'.

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

我尚未完全了解其作用力，但是，如果您希望让您的scss源映射指向具有适当行号的@import文件，则可以使用此功能.

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.

行号不正确的原因，在我的情况下，我发现sass符合以下条件

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

body {
   background: black;
}

到

body {
   background: black; }

这篇关于sass-loader生成破碎的源映射的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！