Лоадеры для CSS Webpack
Для начала нам нужно установить лоадеры, которые будут загружать CSS из файла и добавлять его в JavaScript бандл.
Лоадер css-loader нужен, чтобы Webpack мог обработать импорты CSS файлов. Давайте установим его:
npm install css-loader --save-dev
Лоадер style-loader нужен, чтобы Webpack мог внедрять CSS код в HTML страницу. Давайте установим его:
npm install style-loader --save-dev
Настройка импорта
После установки лоадеров мы можем воспользоваться ими в файле конфигурации, порядок их перечисления в массиве свойства use
важен, так как загрузчики используются от последнего к первому:
webpack.config.jsexport default {
entry: './src/index.js',
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
};
Тестирование импорта
Давайте потестируем импорт CSS стилей в JavaScript файле, сделаем файл со стилями:
/src/styles.cssbody {
background: red;
}
Импортируем его:
/src/index.jsimport './styles.css';
Если после сборки проекта открыть в браузере HTML файл, к которому подключен файл сборки, мы увидим результат работы наших стилей.