Теперь давайте также добавим файл .scss и попробуем связать его с webpack, используя sass-loader
.
- В папке ./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]