Давайте посмотрим, как получить наши стили - файлы 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
- В папке 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)
Это означает, что для любого файла, имя файла которого совпадает с регулярным выражением, указанным в test
property, сначала используйте '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]