Webpack 4 - стиль-загрузчик / URL не работает

Question

У меня настроен веб-пакет, и он работает нормально, но в процессе разработки он использует встроенные таблицы стилей scss вместо URL-адреса.

module: {
    rules: [
        {
            test: /\.scss$/,
            use: [
                { loader: "style-loader"},
                { loader: "css-loader" },
                { loader: 'postcss-loader',
                    options: {
                        plugins: () => [require('autoprefixer')]
                    }
                },
                { loader: "sass-loader" }
            ]
        }
    ]
}

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

module: {
    rules: [
        {
            test: /\.scss$/,
            use: [
                { loader: "style-loader/url"}, 
                { loader: "file-loader" },
                { loader: "css-loader" },
                { loader: 'postcss-loader',
                    options: {
                        plugins: () => [require('autoprefixer')]
                    }
                },
                { loader: "sass-loader" }
            ]
        }
    ]
}

Это не приводит к ошибкам и вставляет следующую таблицу стилей в мой заголовок;

<link rel="stylesheet" type="text/css" href="6bbafb3b6c677b38556511efc7391506.scss">

Как вы видите, он создает файл scss, тогда как я ожидал файл .css. Я попытался переместить загрузчик файлов, но это тоже не сработало и привело к нескольким сбоям. Любая идея, как превратить это в рабочий файл CSS?

Я не могу использовать mini-css-extract в моей среде разработчика, поскольку я использую HMR. Я уже получил это работает над моим продуктом Env.

Обновление: При удалении css-загрузчика он компилируется и показывает мой css, примененный к странице. Но когда я проверяю элементы, все находится в строке 1, и файл, на который он ссылается, не может быть найден

Кстати, я импортирую свой CSS в index.js;

import '../css/styles.scss';

Answer 1

У меня была похожая проблема с веб-пакетом, после долгого поиска я нашел решение для объединения нескольких плагинов:

Это мой результат конфигурации: (в качестве бонуса он сохраняет ваши sass исходные карты;))

watch: true,
mode: 'development',
devtool: 'source-map',
plugins: [
    new MiniCssExtractPlugin({
        filename: "[name].css", //make sure you use this format to prevent .scss extention in the hot reload file
        chunkFilename: "[id].css"
    })
],
module: {
    rules: [
        {
            test: /\.scss$/,
            use: [
                'css-hot-loader', //5. this will hot load all the extracted css.
                MiniCssExtractPlugin.loader, //4 this will extract all css
                {
                    loader: "css-loader", //3. this is where the fun starts
                    options: {
                        sourceMap: true
                    }
                },
                {
                    loader: "postcss-loader", //2. add post css
                    options: {
                        sourceMap: true
                    }
                },
                {
                    loader: "sass-loader", //1 . you can ingore the globImporter
                    options: {
                        importer: globImporter(),
                        includePaths: ["node_modules"],
                        sourceMap: true
                    }
                }
            ]
        },
    ]
}

Answer 2

Вы можете установить extract-text-webpack-plugin для webpack 4, используя:

npm i -D extract-text-webpack-plugin @ next

Вы можете определить следующие константы:

// Configuring PostCSS loader
const postcssLoader = {
    loader: 'postcss-loader',
    options: {
        ident: 'postcss',
        plugins: [
                // Write future-proof CSS and forget old preprocessor specific syntax.
                // It transforms CSS specs into more compatible CSS so you don’t need to wait for browser support.
                require('postcss-preset-env')()
        ]
    }
};

// Configuring CSS loader
const cssloader = {
    loader: 'css-loader',
    options: {
       importLoaders: 1
    }
};

Затем в разделе загрузчика SASS вы можете использовать следующее:

ExtractTextPlugin.extract({
    use: [cssloader, postcssLoader, 'sass-loader']
})

Тогда в разделе плагинов вам нужно использовать следующее:

new ExtractTextPlugin({
    filename: 'css/[name].css'
)

Теперь предположим, что ваш раздел ввода выглядит так:

    entry: {
        app: 'index.js'
    }

Сгенерированный CSS будет назван как app.css и помещен в папку css.

Еще один полезный плагин для обработки таких операций пост-создания:

HtmlWebpackPlugin и HtmlWebpackIncludeAssetsPlugin

Работа с этими плагинами вместе с extract-text-webpack-plugin дает вам большую гибкость.