React Webpack项目浏览器调试不显示CSS/SCSS文件名求助

问题描述 #

使用Webpack手动构建React微前端项目，Chrome调试元素时能看到生效的CSS样式，但无法关联到对应的CSS/SCSS源文件，当前CSS是嵌入到<style>标签中的，需要在调试时显示样式对应的源文件名和位置。

原Webpack配置 #

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    output: {
        path: path.resolve(__dirname, "../", 'build'),
        filename: 'bundle.js',
    },
    devServer: {
        port: 8000,
        hot: true,
        historyApiFallback: true,
    },
    module: {
        rules: [
            {
                test: /\.(?:js|ts|tsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-react', '@babel/preset-env'],
                        plugins: ["@babel/plugin-transform-runtime"]
                    }
                }
            },
            {
                test: /\.(?:css|scss)$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader",
                    "postcss-loader"
                ],
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html'
        }),
    ],
}

解决方案 #

要实现调试时关联CSS/SCSS源文件，需要开启CSS Source Map，并确保所有处理样式的loader都启用sourceMap支持，同时配置Webpack的devtool选项。

修改后的Webpack配置如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    // 开发环境推荐使用该devtool，兼顾构建速度和调试体验
    devtool: 'eval-cheap-module-source-map',
    output: {
        path: path.resolve(__dirname, "../", 'build'),
        filename: 'bundle.js',
    },
    devServer: {
        port: 8000,
        hot: true,
        historyApiFallback: true,
    },
    module: {
        rules: [
            {
                test: /\.(?:js|ts|tsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-react', '@babel/preset-env'],
                        plugins: ["@babel/plugin-transform-runtime"]
                    }
                }
            },
            {
                test: /\.(?:css|scss)$/,
                use: [
                    {
                        loader: "style-loader",
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: "css-loader",
                        options: {
                            sourceMap: true,
                            // 若使用CSS Modules，保留以下配置；无需则可删除
                            modules: {
                                localIdentName: '[name]__[local]--[hash:base64:5]',
                            }
                        }
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            sourceMap: true
                        }
                    }
                ],
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html'
        }),
    ],
}

配置说明 #

1. devtool: 'eval-cheap-module-source-map'：开发环境下该配置能快速生成sourceMap，保留原始模块的源代码，避免代码被转为eval形式，保证调试体验的同时不显著降低构建速度。
2. 各样式loader的sourceMap: true：让style-loader、css-loader、sass-loader、postcss-loader在处理样式时生成对应的sourceMap，将最终嵌入到页面的<style>样式与原始SCSS/CSS文件关联起来。

配置完成后，重启Webpack Dev Server，打开Chrome开发者工具：

• 在Elements面板查看元素样式时，会显示样式对应的源文件路径和行号；
• 在Sources面板中可直接找到对应的.scss/.css源文件，进行断点调试或修改。

内容的提问来源于stack exchange，提问作者Noventiq