CSS-модули в React — стартовый набор

Традиционно мы хранили наш клиентский код в трех отдельных группах (html, css, js). Когда SPA (одностраничные приложения) стали популярными, было неинтересно ограничивать большое приложение всего тремя группами. Мы должны быть в состоянии разбить их на гораздо большее количество групп, а затем пришло сквозное решение (в реальном смысле). И ответом был модульный CSS.

Не только CSS, но и HTML и JS сделаны модульными. Таким образом, все три объединены в один блок, известный как Компоненты.

Первый урок при изучении ReactJS: «все является компонентом». Самое лучшее в компонентах то, что они работают независимо и компонуемые. Мы можем без особых усилий повторно использовать компоненты в нескольких проектах.

React привносит множество интересных концепций, которые будут жить в течение следующего десятилетия или двух. Сказав это, потребуется некоторое время, чтобы эти темы усвоились новому разработчику. Помимо обучения, создание самого проекта считается для новичков сложным процессом.

create-react-app — отличный инструмент для начала работы с проектом React, но он не поддерживает Modular CSS из коробки. Таким образом, решение состоит в том, чтобы создать установку с нуля. Несмотря на то, что доступно много хороших руководств, новый разработчик упустит один или два момента и не сможет завершить настройку. И некоторые учебники устарели.

Стартовый комплект

Я создал простой стартовый комплект с минимальной настройкой, в основном охватывающий поддержку css-модулей. Сделайте клон репозитория и просмотрите файлы. Я не включил некоторые популярные зависимости, такие как react-props, jest и т. д., чтобы не усложнять. Вы можете использовать его как стартовый проект или просто как учебный ресурс.

Я хотел бы пройтись, всего лишь несколько настроек webpack. Для обработки css нам нужно добавить два загрузчика:

1. css-loader: загружает css только из файловой системы.

2. style-loader: который фактически добавляет загруженный css на страницу.

// from webpack.config.dev.js
{
    test: /\.css$/,
    use: [
         {
            loader: 'style-loader'
         }, 
         {
            loader: 'css-loader',
            options: {
               modules: true,
               localIdentName: '[name]_[local]__[hash:base64:5]'
            }
         }
   ]
}

Мы можем предположить, что css-loader должен быть применен до style-loader. Загрузчики Webpack принимают необязательный объект конфигурации (options). Итак, для «css-loader» мы устанавливаем для логического свойства «module» значение «true». Мы также задаем для свойства localIdentName более хитрое имя. Это служит цели генерации случайных имен классов, чтобы не было конфликтов с именами классов, исходящими из некоторых других модулей/компонентов.

Я также использую несколько плагинов для веб-пакетов, и позвольте мне добавить небольшое примечание о них.

HTMLWebpackплагин

Мы знаем, что в React мы обрабатываем даже css и html внутри javascript, и точкой входа для нашего проекта в основном является ‘index.js’. Но когда дело доходит до запуска в браузере, нам нужно обернуть наш javascript в html-страницу. И этот плагин решает эту задачу. Мы предоставляем место для использования «шаблона html» в файле webpack.

Извлечьтекстовый плагин

По умолчанию css будет связан с javascript. В случае, если мы хотим иметь css в отдельном файле (скажем, style.css), мы должны использовать этот плагин. Мы используем его только в производстве, а не в среде разработки, потому что он не работает вместе с «горячей заменой модуля».

Пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы.