Давайте посмотрим, как получить наши стили - файлы css и sass - в пакете приложения webpack.

Погрузчики

Webpack сам по себе знает только javascript, поэтому, когда мы хотим, чтобы он упаковывал любые другие типы ресурсов, такие как .css или .scss или .ts, веб-пакету требуется помощь для компиляции и объединения этих типов ресурсов, не относящихся к javascript.

Загрузчики являются узлом Утилиты, созданные для webpack, чтобы помочь webpack компилировать и / или преобразовывать данный тип ресурса, который может быть объединен как модуль javascript.

css-loader - это модуль npm, который поможет webpack собирать CSS из всех файлов css, на которые есть ссылки в вашем приложении, и помещать его в строку.

Затем style-loader берет строку вывода, сгенерированную указанным выше css-loader, и помещает ее в теги ‹style› в файле index.html.

Итак, давайте начнем с установки двух загрузчиков.

$ npm install css-loader style-loader --save-dev

Добавление файла .css

  1. В папке src создайте подпапку - styles. В src/styles создайте файл app.css со следующим содержимым:

2. Обновите шаблон index.html, чтобы добавить div для проверки работоспособности приведенного выше css:

Выше мы добавили тег <div> в наш файл шаблона ./src/index.html, и со стилем, определенным для тега div в файле app.css, мы ожидаем, что этот div будет иметь background-color: # 99cc00 (зеленый)

3. Затем, чтобы webpack мог обрабатывать, компилировать и связывать код css, нам нужно будет установить css-loader и style-loader в webpack.config.js.

В webpack.config.js добавьте rule, чтобы использовать 'css-loader' и 'style-loader' для .css файлов.
rules настроены в свойстве module в webpack.config.js, как показано ниже:

Давайте рассмотрим то, что мы только что сделали выше, в webpack.config.js.

Строка № 8–15: Мы добавили ключ module к нашему объекту конфигурации webpack, присвоив ему объект со свойством rules, которое представляет собой массив некоторых правил для настройки загрузчиков, которые мы хотим использовать с webpack.

В настоящее время единственное имеющееся у нас правило имеет test:/\.css$/ и 'style-loader', 'css-loader' в его массиве 'use' (строки № 11–12)
Это означает, что для любого файла, имя файла которого совпадает с регулярным выражением, указанным в testproperty, сначала используйте 'css-loader' для их компиляции, а затем используйте 'style-loader' на выходе css-loader. Обратите внимание, что веб-пакет применяет загрузчики к соответствующим ресурсам в порядке от последнего до первого.

4. Теперь, когда мы добавили css-loader и style-loader в webpack.config, он будет работать с любыми css, найденными в дерево зависимостей, когда оно начинает сборку пакета, начиная с входного файла.

Хотя мы добавили файл css, а также загрузчик css в webpack.config, CSS в файле не будет объединен веб-пакетом в пакет приложения (app.bundle.js), потому что мы еще не включили файл css в дерево зависимостей нашего модуля.

Чтобы webpack знал, что app.css является нашей зависимостью, нам необходимо импортировать файл в наше дерево зависимостей. Давайте импортируем его в app.js, как показано ниже:

Обратите внимание, что в строке 4 выше мы импортировали app.css, чтобы он считался зависимостью модуля от webpack.

5. Повторите команду npm start для webpack, чтобы использовать недавно добавленные правила для загрузчиков:

$ npm start

6. А теперь, если мы обновим наше приложение в браузере (localhost: 9000), мы должны увидеть, как код из app.css внедряется внутри тега ‹style› в index.html и в новый div. мы добавили в index.html должен быть применен к нему стиль.

Далее мы увидим, как файлы SASS скомпилированы и объединены Webpack с помощью sass-loader.

[Предыдущая: Горячая замена модуля] [Следующая: Использование SASS]