Подключаем Sass к Create-React-App

Недавно, Facebook выпустили фантастический инструмент для создания React приложений на основе набора минимальных и упрямых идей, чтобы помочь начинающим начать изучение React, не беспокоясь за свойственный для него сложный инструментарий. С добавлением команды eject, которая позволяет раскрыть скрипты сборки, настройки и другие файлы работающие за кулисами, create-react-app стал чрезвычайно полезным инструментом, как для начинающих, так и для экспертов.

Для начала, установим и сохраним необходимые инструменты из npm, выполнив следующую команду в корне вашего проекта:

Добавление Sass к вашему create-react-app проекту потребует от вас выполнение команды eject. Так же из корня проекта:

После того как команда успешно выполнится, найдите папку config в которой находится два файла конфигурации WebPack. Каждый из этих файлов соответствует определённой среде разработки — dev (разработка) или prod (продакшен). Откройте конфигурационный файл webpack.config.dev.js и найдите блок loaders в блоке module.

В WebPack, loaders (загрузчики, лоадеры) позволяют разработчикам выполнять «предварительную обработку (pre-process)», перед тем как они потребуются или будут загружены. create-react-app использует множество загрузчиков для обработки различных задач сборки, таких как транспайлинг (transpiling) с помощью babel, автоматическая расстановка префиксов с помощью PostCSS. Для того чтобы подключить Sass к вашему проекту, нужно добавить загрузчик, который может обрабатывать Sass файлы.

Начало блока loaders должно выглядеть примерно вот так:

После начала массива loaders вы можете добавить свой загрузчик. Тот Sass загрузчик который мы установили может обрабатывать как Sass, так и Scss файлы.

Для Sass:

Для Scss:

Теперь когда Sass загрузчик находится на месте, вы можете использовать Sass файлы. Например, в компоненте App.js, который идёт по умолчанию с create-react-app, вы можете написать:

Обратите внимание на то, что вы также должны переименовать ваш файл App.css в App.sass.

  • Больше о Sass загрузчике вы можете прочитать здесь.
  • Больше о Webpack загрузчиках в целом вы можете прочитать здесь.
  • Больше о create-react-app инструменте вы можете прочитать здесь.

Комментарии

Добавить комментарий