Я создавал проект на некоторое время с помощью модулей Webpack, Sass и CSS. Обычно в моих файлах .scss
я определяю класс как:
:local(.button) {
color: white;
}
и в моих компонентах React, в методе render
, мне нужны стили:
render = () => {
const styles = require('./MyStyles.scss');
<div className={ styles.button } />
}
и все хорошо с миром. Все работает так, как ожидалось.
Теперь сегодня я читал страницу CSS-модулей и заметил, что ни один из селекторов не был включен :local()
как мой, и, кроме того, они импортировали стили как:
import styles from './MyStyles.scss';
И я подумал: "Ух, это выглядит намного приятнее, проще видеть, где он импортируется, и т.д. И я бы хотел не использовать :local()
и просто по умолчанию локально". Поэтому я попробовал это и сразу столкнулся с несколькими проблемами.
1) `import styles from../MyStyles.scss ';
Поскольку я использую ESLint в своих файлах React, я сразу же получаю сообщение об ошибке, что MyStyles.scss
не имеет экспорта по умолчанию, который обычно имеет смысл, но страница CSS-модулей заявлена:
При импорте модуля CSS из модуля JS он экспортирует объект со всеми сопоставлениями из локальных имен в глобальные имена.
поэтому я, естественно, ожидал, что экспорт по умолчанию в таблицу стилей будет объектом, к которому они тоже относятся.
2) Я попробовал import { button } from './MyStyles.scss';
Это пропускает linting, но button
регистрируется как undefined.
3) Если я вернусь к методу require
импорта моих стилей, все, что не указано в :local
, равно undefined.
Для справки, мой загрузчик веб-пакетов (я также включаю Node-Neat и Node-Bourbon, две удивительные библиотеки):
{ test: /.(scss|css)$/, loader: 'style!css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap&includePaths[]=' + encodeURIComponent(require('node-bourbon').includePaths) +
'&includePaths[]=' + encodeURIComponent(require('node-neat').includePaths[1]) + '&includePaths[]=' + path.resolve(__dirname, '..', 'src/client/') }
Мои вопросы, следуя всем этим, следующие:
1) При использовании CSS-модулей с Sass я ограничился использованием :local
или :global
?
2) Поскольку я использую webpack, это также означает, что я могу только require
мои стили?