Если вы использовали create-react-app или gatsby для создания своего приложения или даже приступили к работе над существующим реагирующим приложением, оно будет поддерживать синтаксический анализ файлов CSS и их компиляцию в браузере.
С учетом сказанного давайте посмотрим, как включить CSS и sass для реагирующего приложения.
Прежде чем продолжить, следуйте этому руководству и сначала настройте собственное базовое приложение React: Как создать приложение React с нуля с помощью Babel и Webpack | Майкл Тонг | август 2021 г. | JavaScript на простом английском
Как только вы закончите, мы установим css-loader и sass-loader для поддержки css и sass.
Если вы помните, при запуске npm start после настройки проекта вы получите сообщение об ошибке, похожее на следующее изображение:
Для начала нам нужно будет выполнить следующие шаги:
Шаг 1: установите css-loader с помощью этой команды на терминале:
установка npm — save-dev [email protected] [email protected]
Давайте поговорим о том, что делает каждая из этих библиотек:
- css-loader: позволяет webpack анализировать такие функции, как import и url(). Это позволяет нам ссылаться на правила CSS, импортируя файлы CSS в виде строк.
- style-loader: отвечает за компиляцию всех css и превращение их в тег стиля в HTML-доме.
При этом нам нужно установить правило в webpack.config.js, чтобы эти загрузчики знали, что делать с файлами расширения .css.
Шаг 2: измените webpack.config.js и убедитесь, что он выглядит следующим образом:
Под правилами в объекте модуля мы добавили правило, говорящее, что для всех файлов CSS мы будем использовать style-loader и css-loader для их обработки.
Если ваше приложение все еще работает, завершите его с помощью Ctrl-C и снова перезапустите с помощью npm start. Перейдите на localhost: 8080, и вы должны распечатать «Hello World»!
Это было легко, не так ли? Почему мы делаем это, когда npx-create-app делает свое дело?
Если вы просто хотите научиться создавать реагирующее приложение, вам не нужно следовать этому руководству. Однако, если вы хотите стать опытным разработчиком, вам следует изучить, как все происходит за кулисами. Возможно, однажды вам будет предложено настроить приложение для реагирования с пользовательскими настройками веб-пакета.
Сасс
Если вы хотите, чтобы ваше приложение запускало более мощную версию CSS, то есть sass, вы можете установить следующие библиотеки с помощью следующей команды:
npm install — save-dev sass sass-loader node-sass.
После этого вернитесь к webpack.config.js и добавьте дополнительное правило, которое выглядит следующим образом:
Вы также можете создать файл style.scss со следующим содержимым:
Теперь перейдите к вашему app.js и замените его следующим:
И если вы запустите свое приложение, вы увидите, что Hello, World окрашена в красный цвет.
Если вам интересно узнать о преимуществах sass по сравнению с CSS, прочтите эту статью:
Вот и все! Вы только что закончили создание приложения для реагирования, которое поддерживает CSS и sass с нуля.
