webpack - Webpack SASS 源映射是否损坏？

Question

我正在评估 Webpack 作为我公司项目中 Grunt 的替代品。一切看起来都很棒，除了 SASS 源映射，它指向项目样式表的错误文件和库文件的错误路径。例如，使用以下最小配置，唯一规则归因于 Bootstrap 的 _reboot.scss 并且 node_modules 显示为嵌套在 src 下。

是我设置有误，还是这是一个实际问题？如果是这样，有人知道我应该向哪个项目提交错误报告吗？

package.json

{
  "name": "webpack-test",
  "version": "1.0.0",
  "license": "UNLICENSED",
  "scripts": {
    "build": "webpack"
  },
  "dependencies": {
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.8",
    "sass-loader": "^7.0.3",
    "node-sass": "^4.9.0",
    "css-loader": "^0.28.11",
    "mini-css-extract-plugin": "^0.4.0",
    "bootstrap": "^4.1.1"
  }
}

webpack.config.js

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    mode: "development",
    plugins: [
        new MiniCssExtractPlugin()
    ],

    entry: "./src/main.scss",
    output: {
        path: path.resolve(__dirname, "dist")
    },
    devtool: "source-map",
    module: {
        rules: [
            {
                test: /\.(scss)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            }
        ]
    }
};

src/main.scss

@import "~bootstrap/scss/bootstrap";

body {
    color: blue;
}

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; }