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

Предпосылка

  1. Узел / npm должен быть установлен.
  2. node-sass должен быть установлен.

Давайте запачкаем руки и настроим шаблон

  1. Убедитесь, что ваш пакет create-response-app установлен и обновлен до версии v2. Откройте терминал / cmd и введите create-react-app --version
  2. Если результат меньше 2 или команда не найдена, введите
    npm i -g create-react-app внутри окна терминала / cmd,
    иначе Продолжить.
  3. Теперь в вашей системе должно быть установлено приложение create-response-app v2. Отлично, давай воспользуемся этим.
  4. Теперь введите create-react-app Projectada в окне терминала / cmd. Это должно создать проект с именем Projectada.
  5. После завершения процесса create-response-app введите cd Projectada в окне терминала / cmd.
  6. Теперь создайте новую папку с именем Sass в каталоге Projectada.
  7. В папке Sass создайте файл с именем main.scss или main.sass.
  8. Добавьте рабочий код css в файл main.scss или main.sass, как показано ниже.

Подключение вещей

  1. Теперь импортируйте файл main.scss в файл app.js, как показано ниже.

2. Введите npm install --save node-sass в каталоге проекта, чтобы установить и добавить пакет node-sass.

3. Теперь запустите сервер, используя npm start.

4. Вы должны увидеть что-то вроде этого.

Это все, ребята.

Я опубликую новый пост, в котором должен быть более понятный подход к добавлению файлов sass в проект create-response-app.

Удачного кодирования.