webpack 4 sass-loader 不生成 scss 源映射

Posted 2023-02-22

【中文标题】webpack 4 sass-loader 不生成 scss 源映射

【英文标题】：webpack 4 sass-loader not generating scss source maps

【发布时间】：2020-06-30 00:32:12

【问题描述】：

问题总结

我正在尝试为我的 scss 文件创建源映射。 Webpack 在下面的设置中运行和编译 scss 和 js 很好，但是无论我尝试什么，生成的 js/css 文件都没有任何源映射。我已经搜索了两天寻找答案，但我的配置代码似乎足够可靠。知道为什么根本不会生成 scss 源映射吗？我还需要他们拾取 scss 部分。

我添加的所有sourceMap: true 选项似乎都没有任何作用。 devtool: 'source-map' 是一样的，没有区别。我尝试调整 scss 条目配置以导入所有 .scss 文件，而不仅仅是 *-main.scss 文件，但我遇到了相同的结果，什么也没有。

webpack.config.js：

const path = require('path');
const entry = require('webpack-glob-entry');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const MinifyPlugin = require("babel-minify-webpack-plugin");

module.exports = 
    entry: entry('./Pages/Themes/**/javascript/*.js', './Pages/Themes/**/Scss/*-main.scss'),
    mode: 'development',
    output: 
        path: path.resolve(__dirname, 'wwwroot/bundles/js/'),
        filename: '[name].bundle.js',
    ,
    watch: true,
    devtool: 'source-map',
    module: 
        rules: [
            
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/
            ,
            
                test: /\.scss$/,
                use: [
                    'style-loader',
                    
                        loader: MiniCssExtractPlugin.loader,
                        options: 
                            sourceMap: true,
                        
                    ,
                    
                        loader: 'css-loader',
                        options: 
                            sourceMap: true,
                        
                    ,
                    
                        loader: 'postcss-loader',
                        options: 
                            plugins: [
                                require('autoprefixer'),
                                require('cssnano')
                            ],
                            sourceMap: true,
                        
                    ,
                    
                        loader: 'sass-loader',
                        options: 
                            sourceMap: true,
                        
                    
                ],
            
        ]
    ,
    plugins: [
        new MinifyPlugin(),
        new MiniCssExtractPlugin(
            filename: '../css/[name].css',
            sourceMap: true
        )
    ]
;

上面的代码输出如下：

捆绑

CSS theme-main.css js theme-main.bundle.js

【问题讨论】：

最后找到问题所在了吗？我的配置几乎和你一样，但我很难让它工作..

【参考方案1】：

我遇到了同样的问题。我用下面的配置解决了。

devtool: 'source-map',
  module: 
    rules: [
      
        test: /\.(sa|c|sc)ss$/,
        use: [
          'style-loader',
          
            loader: 'css-loader',
            options: 
              sourceMap: true
            
          ,
          
            loader: 'sass-loader',
            options: 
              sourceMap: true,
            
          
        ]
      
    ]
  

希望对你有帮助 问候。