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
    • 主題-main.css
  • js
    • 主題-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,
            }
          }
        ]
      }
    ]
  }

我希望它可以幫助你問候。