Webpack 中带有 sass-loader 和 postcss-loader 的 sourceMap

Posted 2023-02-22

【中文标题】Webpack 中带有 sass-loader 和 postcss-loader 的 sourceMap

【英文标题】：sourceMap with sass-loader and postcss-loader in Webpack

【发布时间】：2019-02-24 14:15:30

【问题描述】：

我正在尝试在 webpack 中启用 sourceMaps，但 sass-loader 和 postcss-loader 组合似乎存在问题。

启用 sass-loader 和 postcss-loader 我的控制台显示“无源”：

但是当我禁用 postcss-loader 时，sourceMap 可以正常工作并指向“排版”文件：

webpack.config.js

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = 
    mode: 'development',
    entry: './src/index.js',
    output: 
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/dist',
        filename: 'js/bundle.js',
    ,
    devtool: 'inline-source-map',
    module: 
        rules: [
                test: /\.css$/i,
                use: ExtractTextPlugin.extract(
                    fallback: 'style-loader',
                    use: ['css-loader', 'postcss-loader']
                )
            ,
            
                test: /\.scss$/i,
                use: ExtractTextPlugin.extract(
                    fallback: 'style-loader',
                    use: [
                            loader: 'css-loader',
                            options: 
                                sourceMap: true
                            
                        ,
                        
                            loader: 'postcss-loader',
                            options: 
                                sourceMap: true
                            
                        ,
                        
                            loader: 'sass-loader',
                            options: 
                                sourceMap: true
                            
                        
                    ]
                )
            ,
            
                test: /\.js$/i,
                exclude: /node_modules/,
                loader: 'babel-loader'
            
        ]
    ,
    plugins: [
        new ExtractTextPlugin('css/style.css')
    ]
;

ma​​in.scss

@import 'typography';

typography.scss

p 
    font-size: responsive 12px 18px;

【参考方案1】：

您可以尝试以下方法。这是我正在使用的，它正在工作。

    test: /\.(sa|sc|c)ss$/,
    exclude: ['/node_modules', './dist', '/src/js', '/docs'],
    use: [
        MiniCSSExtractPlugin.loader,
        
            loader: 'css-loader',
            options: 
                sourceMap: true,
                minimize: process.env.NODE_ENV === 'production',
            
        ,
        
            loader: 'postcss-loader',
            options: 
                sourceMap: true,
                syntax: postCssScss,
                plugins: () => [
                    autoprefixer,
                    postCssPresetEnv(
                        stage: 0,
                        features: 
                            'color-mod-function': true,
                            'alpha-hex-colors': true
                        
                    ),
                ],
            ,
        ,
        
            loader: 'sass-loader',
            options: 
                sourceMap: true
            
        
    ]

extractTextPlugin 已被 Webpack4 弃用，取而代之的是 miniCssExtractPlugin

【讨论】：

你说得对，我的评论包含错误。但是您确实在代码中使用了最小化。

我知道.. 这就是我在这里发表评论的原因 :) 但我会删除我的评论，因为它确实会令人困惑。

如果css-loader 已更改，请随时更新答案，以免返回错误