В прошлый раз я писал про Модули 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 и т. д., чтобы сделать его простым и понятным.
Пожалуйста, дай мне знать, если возникнут какие-либо вопросы.