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

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

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

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

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

npm run 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: [
  // Process JS with Babel.
  {
    test: /\.js$/,
    include: paths.appSrc,
    loader: 'babel',
    query: require('./babel.dev')
  },
  ...

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

Для Sass:

{
  test: /\.sass$/,
  include: paths.appSrc,
  loaders: ["style", "css", "sass"]
},

Для Scss:

{
  test: /\.scss$/,
  include: paths.appSrc,
  loaders: ["style", "css", "sass"]
},

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

import './App.sass';

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

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