В прошлый раз я писал про Модули CSS в React — Starter Kit. Пожалуйста, прочитайте это, прежде чем читать это, чтобы понять контекст.

Хотя модульный css имеет много достоинств, иногда мы хотели бы использовать некоторые стили глобально, чтобы обеспечить согласованность и избежать дублирования css. Или мы можем использовать библиотеки на основе имен классов, такие как bootstrap и font-awesome.

Поэтому, естественно, у нас могут быть некоторые глобальные стили и локальные стили. При создании нашего jsx нам может понадобиться объединить имена классов. Многие используют для этой цели служебную библиотеку classnames. И, конечно же, есть и другие элегантные способы. И один из таких вариантов — babel-plugin-react-css-modules.

Этот плагин позволяет нам писать глобальные стили в атрибуте className (как мы обычно делаем) и локальные стили в атрибуте styleName.

Атрибут styleName — это не атрибут, определенный реакцией, а атрибут, определенный плагином. Во время компиляции плагин объединяет имя стиля с именем класса, что позволяет нам писать элегантный код.

<button 
    className = "btn btn-success" 
    styleName = 'designTwo'
> 
    Second Level Component 
</button>

Здесь я использую классы начальной загрузки, а также пользовательский класс. Это выглядит красиво, и мы четко указываем, какой стиль является локальным, и это добавляет удобочитаемости.

Этот плагин решает и некоторые другие проблемы, о которых вы можете прочитать в официальной документации.

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

(Вы можете клонировать его из github repo.)

Это похоже на предыдущий стартовый набор, но с некоторыми отличиями. И я объясню только разницу

//.babelrc
{
 "presets":["es2015", "react"],
 "plugins": ["react-css-modules"]
}

Нам нужно добавить плагин в конфигурационный файл babel, а также в качестве зависимости от разработчиков. (В Babel пресеты — это не что иное, как набор предопределенных плагинов.)

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

В приведенном выше блоке конфигурации есть только одно изменение. Мы передаем дополнительную опцию нашему «css-загрузчику» ( importLoader: 1). Это означает, что перед загрузкой этого нужно обработать еще один загрузчик, и это плагин react-css-module.

Хотя различия очень минимальны, они не очень интуитивны. Делая настройку в первый раз, я бился пару часов без какого-либо прогресса.

Этот стартовый набор очень минимален, так как я не включил основные зависимости, такие как prop-types, jest, eslint и т. д., чтобы сделать его простым и понятным.

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