我正在尝试在我的 React 项目中使用 css 模块。我能够执行以下操作:
import styles from './demo.css'
const Demo = () => <div styleName="demo">Hello</div>
我的样式是从 CSS 中提取并成功添加前缀的。但是,当我尝试使用 CSS 模块的“组合”功能时,它似乎被完全忽略了。我什至没有从其他文件导入 - 只是试图编写本地类。但是,当我克隆演示项目(https://github.com/gajus/babel-plugin-react-css-modules/tree/master/demo)并在 CSS 中添加“composes”时,它可以工作。我看不出我的代码和演示中的代码有什么区别......
我的 webpack 加载器是:
loaders: [
{
test: /\.jsx?$/,
loader: 'babel?cacheDirectory',
include: PATHS.src
},
{
test: /\.css$/,
loaders: [
'style',
'css?importLoader=1&modules&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
],
include: PATHS.src,
}
]
这是我的 .babelrc:
{
presets: [
"es2015",
"react",
],
plugins: [
[
"react-css-modules",
{
generateScopedName: "[path]___[name]__[local]___[hash:base64:5]"
}
],
"transform-object-rest-spread",
],
env: {
development: {
presets: [
"react-hmre"
]
}
}
}