I'm trying to use css modules in my React project. I am able to do things like:
import styles from './demo.css'
const Demo = () => <div styleName="demo">Hello</div>
And my styles are pulled from the CSS and prefixed successfully. However, when I try to use the "composes" function of CSS modules, it seems like it is completely ignored. I'm not even importing from other files - just trying to compose local classes. However, when I clone the demo project (https://github.com/gajus/babel-plugin-react-css-modules/tree/master/demo) and add a "composes" in the CSS, it works. I don't see what the difference is between my code and that in the demo...
My webpack loaders are:
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,
}
]
This is my .babelrc:
{
presets: [
"es2015",
"react",
],
plugins: [
[
"react-css-modules",
{
generateScopedName: "[path]___[name]__[local]___[hash:base64:5]"
}
],
"transform-object-rest-spread",
],
env: {
development: {
presets: [
"react-hmre"
]
}
}
}
Having the same issue here. The workaround I found is by using vars instead composes.
/* colors.css */
:root {
--color: #4A90E2
}
/* button.css */
@import 'colors.css';
.button {
color: var(--blue);
}
I had this problem, and found that it was solved by adding cacheDirectory: false
For example webpack.config.js:
...
module : {
loaders : [
{
test : /\.jsx?/,
include : APP_DIR,
loader : 'babel-loader',
query: 'cacheDirectory=false',
},
...