Как настроить компилятор sass в приложении React js?
React js - одна из самых известных интерфейсных библиотек для создания веб-сайтов. React js действительно предоставляет инструмент командной строки create-react-app, с помощью которого вы можете создать приложение ReactJs за секунды. Если на вашем компьютере установлен node js, и вы можете установить пакет create-response-app, выполнив команду ниже в своем интерфейсе командной строки.
После того, как вы запустите команду ниже, после этого мы сможем легко создать приложение React js. Запустите команду ниже, чтобы создать приложение React js.
После того, как ваше приложение будет создано после этого, выполните команду ниже, чтобы войти в созданное приложение.
cd test-app
Откройте свой проект в каком-нибудь красивом редакторе кода, и вы увидите структуру папок ниже.
Теперь попробуем настроить компилятор sass для нашего проекта. Для SASS нам обязательно понадобится добавление зависимости sass в наш файл package.json.
Теперь запустите команду ниже в своем интерфейсе командной строки, чтобы добавить компилятор node-sass, чтобы добавить компиляцию вашего файла sass.
После того, как вы запустите эту команду, вы увидите, что эта зависимость добавлена в ваш файл package.json. После этого вы должны добавить команду ниже в разделе сценариев в файле package.json.
Таким образом, вы можете видеть на приведенном выше снимке экрана, что мы добавили команду sass в сценарии, поэтому все, что вам нужно сделать, это запустить эту команду npm run sass на вкладке во время разработки. Также, если вы видите слева, я создал две папки в папке src. Одна папка для всего вашего файла SASS, который вы должны поместить туда, и как только вы добавите код в файл sass, ваш компилятор скомпилирует ваш файл, и он создаст один единственный файл CSS и поместит его в папку CSS и этот единственный файл CSS, который вы должны поместить в ваш файл index.js. Для получения более подробной информации, пожалуйста, найдите изображение экрана ниже.
На экране выше вы можете увидеть, как вам нужно создать файл SASS в соответствующей папке, и как только вы внесете какие-либо изменения, ваш компилятор SASS динамически обнаружит это изменение, и оно отразится в вашем браузере. Вы также можете увидеть, как создается файл index.css, и все, что вам нужно сделать, это связать этот файл CSS в вашем index.js fie, чтобы связать этот скомпилированный CSS с вашим приложением React.
На приведенном выше снимке экрана вы можете увидеть, как я связал компиляцию CSS с нашим приложением React. Теперь запустите приложение с помощью npm run sass, и вы увидите, как этот CSS применяется к нашему представлению.
Как видите, связать компилятор SASS с приложением React js очень просто.
Вы можете найти код моего репозитория выше ссылка.
Пожалуйста, не стесняйтесь комментировать это и дайте мне знать, что вы думаете по этому поводу. Удачного взлома !!
