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

Question

Problem Summary

I'm trying to create source maps for my scss files. Webpack runs and compiles scss and js fine in the setup below, but the generated js/css files lack any source maps at all no matter what I try. I've searched around for two days looking for an answer, but my config code seems solid enough. Any idea why scss source maps wouldn't be generated at all? I need them to pickup the scss partials as well.

All the sourceMap: true options I've added don't seem to do anything. devtool: 'source-map' is the same, no difference. I've tried adjusting the scss entry config to import all .scss files not just the *-main.scss files, but I was met with the same result, nothing.

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
        })
    ]
};

The code above outputs like so:

• bundles
  • css
    • theme-main.css
  • js
    • theme-main.bundle.js

Answer 1

I had the same problem. I solved it with the following configuration.

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

I hope it helps you Regards.