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

Для работы с 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. Это позволяет быстрее тестировать изменения стилей.