Недавно команда React и ряд ее участников выпустили фантастический инструмент для создания приложений React без конфигурации, основанный на наборе минимальных идей, чтобы помочь новичкам погрузиться в создание приложений React, не беспокоясь оОснащение новичка может оказаться утомительным.
Существует два способа добавить SASS или SCSS в проект create-react-app.
Установка с помощью: сценариев NPM
Этот метод проще и может работать без удаления вашего проекта.Если вы предпочитаете не извлекать, используйте этот метод.Нажмите здесь, чтобы посмотреть официальное руководство проекта о том, как установить Sass или Scss с использованием скриптов NPM.
Установка с помощью: Webpack
Этот метод не так прост, но болеерасширяемый и автоматизированный.К сожалению, этот метод требует выброса.Удаление проекта, хотя и полезное во многих сложных случаях, означает, что вам будет нелегко получить будущие обновления до create-react-app.
Перед запуском установите и сохраните необходимые инструменты из выбранного вами упаковщика, запустиводна из следующих команд в каталоге вашего проекта.
Пряжа: yarn add sass-loader node-sass --dev
NPM: npm install sass-loader node-sass --save-dev
При добавлении sass или scss в ваш проект create-реагировать-приложение сначала потребуется извлечь, что можно сделать, выполнив следующую команду в базовом каталоге вашего проекта.
npm run eject
Как только удаление выполненоЗакончив, найдите папку config, которая содержит, помимо прочего, два файла конфигурации webpack.Каждый из этих файлов конфигурации соответствует отдельной среде - разработке или производству.Введите файл конфигурации разработки webpack.config.dev.js и найдите блок loaders в блоке modules.
В веб-пакете загрузчики позволяют разработчику «предварительно обрабатывать» файлы, когда ониТребуются / загружены.Приложение «Создать реагирование» использует несколько загрузчиков для выполнения различных задач сборки, таких как перенос с помощью babel, префикс с PostCSS или разрешение импорта ресурсов.Чтобы добавить Sass или Scss в этот проект, вы добавите загрузчик, который может обрабатывать файлы Sass и Scss.
Начало блока loaders перед любой модификацией должно выглядеть примерно так:Точный код может измениться в будущих версиях CRA).
loaders: [
// Process JS with Babel.
{
test: /\.js$/,
include: paths.appSrc,
loader: 'babel',
query: require('./babel.dev')
},
...
После начала массива загрузчиков вы можете добавить свой собственный загрузчик для Sass и Scss.Загрузчик «sass», представленный в массиве загрузчиков в приведенном ниже коде, может обрабатывать файлы Sass и Scss.
Если вы предпочитаете SASS, вы можете добавить:
{
test: /\.sass$/,
include: paths.appSrc,
loaders: ["style", "css", "sass"]
},
Если вы предпочитаете SCSS, вы можете добавить:
{
test: /\.scss$/,
include: paths.appSrc,
loaders: ["style", "css", "sass"]
},
Важно: В более новых версиях create-реакции-приложения, если вы видите массив exclude в конфигурации вашего веб-пакета, вам нужно добавить следующие строки в
/\.sass$/,
/\.scss$/,
Теперь, когда загрузчик Sass и Scss установлен, вы можете начать использовать файлы Sass / Scss.Например, в стандартном App.js компоненте, который поставляется с create-реагировать-приложение, теперь вы можете написать
import './App.sass'; // or `.scss` if you chose scss
Обратите внимание, что вам также придется реорганизовать приложение.css »на Sass и измените имя файла на« App.sass ».
Ссылка взята с этого сайта .