Webpack的SASS源映射是否出现问题？

Question

Webpack的SASS源映射是否出现问题？

3

我正在评估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;
}

- Andrew Dinmore

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jameygleason · Accepted Answer

{
  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编译了一些东西。

最初的回答：

使用devtool: 'source-map'在生产环境中和devtool: 'cheap-eval-source-map'在开发环境中。如果您希望使您的scss源映射指向具有正确行号的@import文件，则此方法有效。在某些情况下，行号不正确是由于sass编译的原因。

body {
   background: black;
}

to

body {
   background: black; }