源映射到原始 SCSS 文件

Question

我是using Webpack 4，使用插件MiniCssExtractPlugin 和OptimizeCSSAssetsPlugin 提取SCSS 文件并在生产中缩小main.css 文件。我在我的配置文件中启用了源映射，如下所示：

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = {
    devtool: "source-map",
    entry: {
        style: './src/scss/main.scss'
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                 test: /\.css$/,
                 use: [
                     MiniCssExtractPlugin.loader,
                     { loader: 'css-loader', options: { url: false, sourceMap: true } }
                 ]
             },      
             {
                 test: /\.scss$/,
                 use: [
                     'style-loader',
                     MiniCssExtractPlugin.loader,
                     { 
                         loader: 'css-loader', 
                         options: { 
                             url: false, sourceMap: true 
                         } 
                     },
                     { 
                         loader: 'sass-loader', 
                         options: { 
                             sourceMap: true 
                         } 
                     }
                 ]
             }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            sourceMap: true,
            filename: "main.css"
        }),
        new UglifyJsPlugin({
            sourceMap: true,
            test: /\.js($|\?)/i,
        }),
        new OptimizeCSSAssetsPlugin({
            cssProcessorOptions: {
                map: {
                    inline: true
                }
            }
        }) ,
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        })    
    ]
}

在控制台中，它确实给出了 CSS 规则的来源行，但在捆绑的 main.css 文件中，而不是在单个 scss 文件中，即 _layout.scss、_buttons.scss。

问题

为了显示 CSS 规则的来源，而不是它在捆绑的 main.css 文件中的位置，我应该添加什么配置？

Answer 1

正如我在您的sass-loader 配置中看到的那样，您已经获得了scss 文件的源映射（以验证您需要有一个与您的css 同名的文件，但带有@ 987654324@ 在其名称上），因此您唯一需要做的就是正确配置您的浏览器以加载和使用源地图。此示例使用谷歌浏览器：

1. 打开开发工具
2. 点击齿轮图标或三个点打开设置（右上角）
3. 在常规（或首选项）下，查找“来源”部分。在该部分中，选择“启用 CSS 源映射”。
4. 确保随附的“自动重新加载生成的 CSS”也已启用（如果可用）。最后一步有助于在 CSS 更改时重新加载它。可以将其想象为仅针对 CSS 的实时重新加载功能。
5. 导航到您的本地主机服务器，检查页面上的任何元素。
6. 在开发者工具中，选择 Sources 选项卡。
7. 在左侧的文件树中，右键单击样式表并选择“映射到文件系统资源...”。这将打开文件搜索对话框。选择适当的文件（您的样式表）。在某些较新版本的 Chrome 中，应使用 /*# sourceMappingURL=style.css.map */ 引用自动加载文件
8. 重启开发者工具。

应该可以。让我知道。否则我会微调快速教程。