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：

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

那应该有用。让我知道。否则我会对快速教程进行微调。

Sourcemap到原始SCSS文件

1 个答案: