Добавление Sass к вашему приложению create-react-app само по себе было суетой, я тоже написал об этом статью (здесь). Но с выходом create-react-app v2 нам больше не нужны эти обходные пути. Благодаря команде react, create-react-app v2 получил большую потребность в поддержке sass из коробки.
Предпосылка
- Узел / npm должен быть установлен.
- node-sass должен быть установлен.
Давайте запачкаем руки и настроим шаблон
- Убедитесь, что ваш пакет create-response-app установлен и обновлен до версии v2. Откройте терминал / cmd и введите
create-react-app --version
- Если результат меньше 2 или команда не найдена, введите
npm i -g create-react-app
внутри окна терминала / cmd,
иначе Продолжить. - Теперь в вашей системе должно быть установлено приложение create-response-app v2. Отлично, давай воспользуемся этим.
- Теперь введите
create-react-app Projectada
в окне терминала / cmd. Это должно создать проект с именем Projectada. - После завершения процесса create-response-app введите
cd Projectada
в окне терминала / cmd. - Теперь создайте новую папку с именем Sass в каталоге Projectada.
- В папке Sass создайте файл с именем main.scss или main.sass.
- Добавьте рабочий код css в файл main.scss или main.sass, как показано ниже.
Подключение вещей
- Теперь импортируйте файл main.scss в файл app.js, как показано ниже.
2. Введите npm install --save node-sass
в каталоге проекта, чтобы установить и добавить пакет node-sass.
3. Теперь запустите сервер, используя npm start
.
4. Вы должны увидеть что-то вроде этого.
Это все, ребята.
Я опубликую новый пост, в котором должен быть более понятный подход к добавлению файлов sass в проект create-response-app.