исходная карта в мини-css-extract-плагине

Question

Я не могу заставить исходные карты работать с mini-css-extract-plugin. Я работал с style-loader.

devtool: argv.mode === 'development' ? 'eval' : 'none',

[...]

test: /\.scss$|\.css$/i,
use: [
     {
          loader: MiniCssExtractPlugin.loader,
          options: {sourceMap: argv.mode === 'development', hmr: argv.hot},
     },
     {
         loader: 'css-loader',
         options: {sourceMap: argv.mode === 'development', importLoaders: 1},
     },

[...]

plugins: [
    [...]
    new MiniCssExtractPlugin({
        filename: argv.mode === 'development' ? '[name].css' : '[contenthash].css',
        chunkFilename: argv.mode === 'development' ? '[id].css' : '[contenthash].css',
    }),
]

Немного справочной информации: Я всегда использовал style-loader, чтобы заставить горячую замену модуля работать в режиме разработки и mini-css-extract-plugin для производства.

Теперь mini-css-extract-plugin поддерживает hmr, что потрясающе, поскольку мне больше не придется иметь дело с FOUC в процессе разработки.

Но отсутствие исходной карты, по крайней мере, сообщающей мне, из какого файла исходит стиль, раздражает.

Answer 1

При написании вопроса я нашел возможное решение, которое в итоге сработало.

Я определил devtool как eval, что является самым дешевым вариантом.Я не совсем понимаю, как это работает, но это не настоящая исходная карта, скорее она оборачивает весь исходный код в операторы eval и сообщает браузеру, что это определенный файл, который мне подходит, но эта стратегия, очевидно, не можетработа с файлами CSS.

Я определил devtool как cheap-source-map, что, по-видимому, является самым быстрым вариантом, не основанным на выражениях eval.

Я также думаю, что полностью неправильно понял sourceMapвариант грузчиков.Они нужны мне только при создании полной исходной карты, которая показывает исходный исходный код.(хотя я не проверял это полностью)

Answer 2

Вы должны добавить MiniCssExtractPlugin.loader к своим настройкам правил, также как это

rules: [{
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: true,
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            },