Как настроить Webpack для обработки файлов CSS?

Question

Webpack обрабатывает CSS с помощью загрузчиков, таких как css-loader (для обработки @import и url()) и style-loader (для внедрения CSS в DOM). В продакшене CSS может быть вынесен в отдельный файл.

YeaHub · Accepted Answer

Для работы с CSS в Webpack используются следующие загрузчики:css-loader:Обрабатывает CSS-файлы и разрешает импорты (@import и url()).style-loader:Внедряет CSS в <style> теги внутри HTML.MiniCssExtractPlugin:Выносит CSS в отдельный файл (рекомендуется для продакшена).Пример конфигурации:const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
	module: {
		rules: [
			{
				test: /\.css$/,
				use: [
					MiniCssExtractPlugin.loader, // Для продакшена
					'css-loader', // Обработка CSS
				],
			},
		],
	},
	plugins: [
		new MiniCssExtractPlugin({
		 filename: '[name].css',
	}),
	],
};В режиме разработки можно использовать style-loader вместо MiniCssExtractPlugin.loader. Это позволяет быстрее тестировать изменения стилей.