Estoy tratando de usar módulos css en mi proyecto React. Soy capaz de hacer cosas como:
import styles from './demo.css' const Demo = () => <div styleName="demo">Hello</div>Y mis estilos se extraen del CSS y se anteponen con éxito. Sin embargo, cuando trato de usar la función "redactar" de los módulos CSS, parece que se ignora por completo. Ni siquiera estoy importando desde otros archivos, solo intento componer clases locales. Sin embargo, cuando clono el proyecto de demostración ( https://github.com/gajus/babel-plugin-react-css-modules/tree/master/demo ) y agrego "compone" en el CSS, funciona. No veo cuál es la diferencia entre mi código y el de la demostración...
Mis cargadores de paquetes web son:
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, } ]Este es mi .babelrc:
{ presets: [ "es2015", "react", ], plugins: [ [ "react-css-modules", { generateScopedName: "[path]___[name]__[local]___[hash:base64:5]" } ], "transform-object-rest-spread", ], env: { development: { presets: [ "react-hmre" ] } } }Tener el mismo problema aquí. La solución que encontré es usar vars en lugar de componer.
/* colors.css */ :root { --color: #4A90E2 } /* button.css */ @import 'colors.css'; .button { color: var(--blue); }Tuve este problema y descubrí que se resolvió agregando cacheDirectory: false
Por ejemplo webpack.config.js :
... module : { loaders : [ { test : /\.jsx?/, include : APP_DIR, loader : 'babel-loader', query: 'cacheDirectory=false', }, ...