Что такое модули таблицы стилей?
Использование модулей таблиц стилей - обычная практика в react. Модули таблицы стилей автоматически генерируют уникальные имена классов для компонентов реакции. Это позволяет разработчикам реагирования повторять одни и те же описательные и значимые имена классов для нескольких компонентов в своих приложениях, не беспокоясь о конфликтах имен и переопределении стилей.
Это простое пошаговое руководство по реализации модулей Sass в Create React App версии 2.0.0 и выше.
Предварительные требования
- Менеджер пакетов; Npm или пряжа, рекомендуется.
- Текстовый редактор; VSCode рекомендуется.
- Проект Create-react-app.
Шаги (3)
- Установите node-sass в свой проект create-react-app v2 (и выше). Это необходимо для того, чтобы расширение имени файла «.sass» было импортировано в ваши компоненты React без ошибок выдачи Webpack.
Пряжа: $ yarn add node-sass
Npm: › npm i node-sass
2. Воспользуйтесь преимуществами пакета node-sass; путем преобразования начальных стилей в sass и импорта их в компоненты React. Благодаря этому мы уверены, что файлы sass включены и могут быть импортированы в наши проекты.
3. Наконец, вы можете использовать таблицы стилей модулей для различных компонентов; это делается путем создания таблиц стилей с расширениями файлов «.modules.scss».
Ниже приводится краткая демонстрация:
- Создайте компоненты двух цветных кругов (BlueCircle и YellowCircle) с одинаковыми именами классов в их файлах таблиц стилей (различия стилей только в цвете, чтобы убедиться, что в именах классов нет конфликтов).
Компонент синего круга:
Компонент желтого круга:
- Импортируйте оба компонента в контейнер App.js, используйте их в корневом элементе и просматривайте сохраненные результаты, отображаемые в браузере.
- Проверяя элемент и плагин React Developer Tools для Chrome, мы видим, что каждому компоненту был присвоен уникальный класс от Webpack при компиляции и рендеринге проекта.
Код этого мини-проекта доступен в моем репозитории Github.
