Теперь давайте также добавим файл .scss и попробуем связать его с webpack, используя sass-loader.

  1. В папке ./src/styles добавьте пару файлов .scss, как показано ниже:

./src/styles/themeColors.scss

2. также добавьте файл - ./src/styles/appStyles.scss

Выше мы импортировали ‘themeColors.scss’ в appStyles.scss (строка № 1), а затем определили стили для тега body, используя эти переменные цвета темы.

3. Импортируйте корневой scss-файл 'appStyles.scss' в app.js, чтобы веб-пакет считал его зависимостью:

4. Теперь, когда мы используем sass в нашем приложении, нам понадобитсяsass-loader, который поможет webpack скомпилировать sass в css.
Итак, давайте установим sass-loader.
sass-loader зависит от другого загрузчика - node-sass, поэтому нам придется установить оба.

$ npm install sass-loader node-sass --save-dev

5. Обновите webpack.config.js, чтобы связать sass-loader, затем css-loader, а затем связать их вывод с style-loader (Loader-chaining)

./webpack/webpack.config.js

Выше мы немного обновили правило для обработки наших файлов sass и css.
Теперь тест test: /\.(s*)css$/: что означает любой файл, имя которого совпадает с регулярным выражением /\.(s*)css$ / т.е. любой файл .scss или .css должен быть скомпилирован с цепочкой загрузчиков, указанной в массиве use, т.е. ['style-loader', 'css-loader', 'sass-loader']. Как упоминалось ранее, загрузчики связаны в обратном порядке.

Таким образом, это правило связывает выходные данные sass-loader с css-loader. css-loader примет этот вывод css из sass-loader, а также обработает любые другие файлы .css, которые есть в нашем приложении, и передаст .css в style-loader. , который затем поместит коды css в теги ‹style› в нашем index.html

6. Снова запустите npm start, чтобы веб-пакет работал с обновленными параметрами конфигурации.

$ npm start

7. Обновите наше приложение в браузере (localhost: 9000), теперь мы должны увидеть, как стили из файлов css и .scss применяются к приложению. Ура!

В следующем уроке мы увидим, как использовать extract-text-plugin для извлечения CSS, который у нас есть выше в ‹style› .. ‹/style› в отдельном файле .css.

[Предыдущая: Загрузчики Webpack, CSS и стили] [Следующая: плагин extract-text]