Владислав Калачев

Как подключить Sass к React?

5 782

Доброго времени суток, друзья. В данной статье мы подробно разберем, как можно подключить Sass к React. Поймем какую версию Node.js нужно выбрать для корректной работы пакета node-Sass. Важное уточнение, здесь мы не будем рассматривать установку Sass, используя конфиг Webpack, а рассмотрим установку для проекта сгенерированного create-react-app утилитой.  Давайте приступим и начнем с определений.

Видео на эту тему

Что такое Sass?

Sass это css препроцессор, позволяющий расширить возможности css путем добавления работы с переменными, вложенностью стилей, миксинами, инлайновыми импортами, изолировать нужные стили. Также Sass имеет много других удобных фишек для работы, которые отсутствуют в нативном css.

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

Для того, чтобы подключить к React проекту предпроцессор Sass достаточно воспользоваться пакетом node-sass. Данный пакет позволяет без дополнительных установок добавить Sass в ваш React проект. Для его установки достаточно воспользоваться командой


npm install node-sass

В документации рассматривается вариант установки через китайское зеркало, для этого нужно установить глобальный конфиг зеркала с адресом репозитория, а после вызвать саму установку пакета


npm install -g mirror-config-china --registry=http://registry.npm.taobao.org
npm install node-sass

Выбираем версию node-sass

Важной особенностью данного пакета является его несовместимость со старыми версиями Node.js. Каждая последующая версия node-sass требует новой версии Node.js, без возможности обратной совместимости со старыми.

На официальной странице пакета имеется следующая таблица совместимостей версий.

Прежде чем начать установку убедитесь, что ваша версия Node соответствует устанавливаемой версии пакета. Для этого в консоли вызовите команду 


node -v

или


node —version

Дале установите пакет, указав совместимую с ней версию Node, например, вашу локальную версию Node v14.14.0, тогда для корректной работы нужно установить версию  4.14 до 5.0 пакета.

Для установки конкретной версии воспользуемся командой


npm install node-sass@4.14

Пример работы с Sass

После установки node-sass нужно переименовать все .css файлы на .scss (можно использовать формат .sass, разница заключается только в отсутствии скобок и кавычек).

Для тестирования Sass в React добавим переменную, которой присвоим цвет и укажем ее вместо цвета фона в нашем приложении.

Пример:


$app-background-color: rgb(170, 26, 26);

.App-header {
  background-color: $app-background-color;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

Заключение

Сегодня мы разобрали как можно подключить Sass к React (create-react-app) проекту, посмотрели нюансы, связанные с установкой node-sass и протестировали Sass на примере использования переменных в React приложении. Надеюсь, что данный материал был вам полезен. Учитесь, думайте, пишите код. Удачного кодинга, друзья!

Подписывайтесь на наш канал в Telegram и на YouTube для получения самой последней и актуальной информации. 

Комментарии:

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *