Sourcemap 到原始 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 文件中，而不是 invididual scss 文件，即 _layout.scss、_buttons.scss.

问题

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

Answer 1

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

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

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

Sourcemap 到原始 SCSS 文件

Sourcemap to original SCSS file

javascript

css

sass

minify

webpack