Шаг 3. Подключение стилей

Особенность подключения стилей в webpack — в HTML-файле не нужно указывать link для стилей и script для JS-кода.

Стили подключаются в том JS-файле, который указан в конфиге в качестве входной точки в приложение.

Сложный путь подключения стилей в данном проекте состоит в том, что нужно вручную подключить каждый CSS-файл.

Пример подключения стилей в файле main.js
Пример подключения стилей в файле main.js

Есть и более простой путь подключения стилей. В самом верху находится файл index.css. Так как мы используем webpack, нам доступны импорты и экспорты. Всё, что необходимо сделать — оставить один index.css в файле main.js (index.js), а остальные стили подключать в файле со стилями.

Импорт стилей выполняется с использованием ключевого слова import с добавлением специального символа @. Обратите внимание, после каждого импорта обязательно ставится точка с запятой.

Подключенные стили
Подключенные стили