原始SCSS文件的源映射

Question

我using Webpack 4與MiniCssExtractPlugin和OptimizeCSSAssetsPlugin插件MiniCssExtractPlugin using Webpack 4以提取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同名的文件，但其名稱上帶有.map ） ，因此您唯一需要做的就是對瀏覽器進行有效配置，以加載和使用源地圖。 本示例使用Google Chrome：

1. 開放開發工具
2. 點擊齒輪圖標或三個點以打開設置（右上角）
3. 在常規（或首選項）下，找到“源”部分。 在該部分中，選擇“啟用CSS源映射”。
4. 確保隨附的“自動重新加載生成的CSS”也已啟用（如果可用）。 最后一步有助於在CSS更改時重新加載CSS。 可以將其視為僅適用於CSS的實時重新加載功能。
5. 導航到本地主機服務器，檢查頁面上的任何元素。
6. 在開發人員工具中，選擇“源”選項卡。
7. 在左側的文件樹中，右鍵單擊樣式表，然后選擇“映射到文件系統資源…”。 這將打開文件搜索對話框。 選擇適當的文件（您的樣式表）。 在某些較新版本的Chrome中，應使用/*# sourceMappingURL=style.css.map */參考自動加載文件
8. 重新啟動開發人員工具。

那應該工作。 讓我知道。 否則，我會微調快速教程。