sass-загрузчик webpack 4 не генерирует исходные карты s css - PullRequest
Новая
       22

sass-загрузчик webpack 4 не генерирует исходные карты s css

1 голос
/ 19 марта 2020

Краткое описание проблемы

Я пытаюсь создать исходные карты для моих файлов s css. Webpack запускает и компилирует s css и js нормально в приведенной ниже настройке, но сгенерированные файлы js / css не имеют никаких исходных карт вообще, независимо от того, что я пытаюсь. Я искал ответ в течение двух дней, но мой код конфигурации кажется solid достаточным. Есть идеи, почему исходные карты s css вообще не будут генерироваться? Они нужны мне и для получения партиалов s css.

Все добавленные мной опции sourceMap: true, похоже, ничего не делают. devtool: 'source-map' то же самое, без разницы. Я попытался настроить конфигурацию записи s css, чтобы импортировать все файлы .s css, а не только файлы * -main.s css, но я получил тот же результат, но ничего.

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 Ответ

0 голосов
/ 11 апреля 2020

У меня была такая же проблема. Я решил это с помощью следующей конфигурации. 

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

Надеюсь, это поможет вам. С уважением.

...