Webpack SASS 源映射是不是损坏？

Posted 2023-02-22

【中文标题】Webpack SASS 源映射是不是损坏？

【英文标题】：Are Webpack SASS Source-maps Broken?Webpack SASS 源映射是否损坏？

【发布时间】：2018-12-01 07:26:03

【问题描述】：

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

【参考方案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; 

【讨论】：

纯代码答案没有太大帮助，请尝试解释您的代码。

@GKE 假设它有效，除非 jameygleason 熟悉该软件的内部工作，否则没有什么可以添加到答案中的；这只是一个不应该产生某种影响的设置的怪癖之一。如果没有大量工作，您甚至可能无法确定应该向哪些开发人员发送错误报告。

@jameygleason 非常感谢。恐怕我不知道什么时候有机会测试这个，因为我的 sudio 暂时选择了 Grunt，但手指交叉解决了链接问题。