Простое руководство по добавлению SASS в CRA без извлечения

Итак, вы рыскали по Интернету, пытаясь найти способ сохранить преимущества приложения create response без преждевременного извлечения приложения, и так и не пришли к какому-либо окончательному выводу. Был там. Я здесь, чтобы сказать вам, что это возможно и, самое главное, просто.

Цель этого поста - помочь другим понять, как реализовать SASS в их приложении Create React без запуска команды извлечения, а также дать людям понимание того, как выглядит этот процесс.

Что вам понадобится

Чтобы добавить SASS в ваше приложение Create React, вам нужно сначала выполнить следующие команды установки:

npm install --save-dev node-sass npm-run-all

Node-sass позволит нам интегрировать SASS в наше приложение, в то время как npm-run-all позволит нам запускать несколько скриптов одновременно (вы скоро поймете, зачем нам это нужно).

Следующие шаги

Предполагая, что вы только что создали экземпляр своего приложения Create React, вы заметите, что внутри вашего /src файла уже есть App.css файл, заполненный стилями.

Мы собираемся провести эксперимент, чтобы показать, как будет работать sass-компиляция. Первое, что нам нужно сделать, это создать App.scss файл. В этот файл мы добавим следующий стиль:

.App-header {
  background-color: hotpink;
  height: 150px;
  padding: 20px;
  color: white;
}

Теперь удалите .App-header в исходном файле App.css.

Изменение скриптов

Теперь, когда мы создали наш scss файл, нам нужно изменить наши сценарии по умолчанию, чтобы мы могли активно компилировать scss модификации в наши css файлы:

"scripts": {
  "build-css": "node-sass --include-path ./src --include-path   
    ./node_modules src/ -o src/",
  "watch-css": "npm run build-css && node-sass --include-path ./src 
    --include-path ./node_modules src/ -o src/ --watch --recursive",
  "start": "npm-run-all -p watch-css start-js",
  "build": "npm run build-css && react-scripts build",
  "start-js": "react-scripts start",
...
}

Наконец-то вы готовы запустить свое приложение. Вы можете сделать это, запустив npm run start. Эта команда в основном запускает поиск по относительному пути для scss файлов и компилирует их в css файлы. Вы должны увидеть, что цвет заголовка теперь hotpink, а не черный по умолчанию, как раньше.

Поздравляю! Вы сделали это!