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

Question

问题总结

我正在尝试为我的 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

Answer 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,
            }
          }
        ]
      }
    ]
  }

希望对你有帮助 问候。