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

Webpack SASS源映射是否损坏？

1 个答案: