"compose" ne fonctionne pas avec babel-plugin-react-css-modules

Question

J'essaie d'utiliser des modules css dans mon projet React. Je suis capable de faire des choses comme:

Et mes styles sont tirés du CSS et préfixés avec succès. Cependant, quand j'essaie d'utiliser la fonction "composes" des modules CSS, il semble que c'est complètement ignoré. Je ne suis même pas en train d'importer depuis d'autres fichiers - j'essaye juste de composer des classes locales. Toutefois, lorsque je clone le projet de démonstration (https://github.com/gajus/babel-plugin-react-css-modules/tree/master/demo) et ajoute un "compose" dans le CSS, cela fonctionne. Je ne vois pas ce que la différence entre mon code et que dans la démo ...

Mes chargeurs webpack sont:

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, 
     } 
    ] 

Ceci est mon .babelrc:

{ 
    presets: [ 
    "es2015", 
    "react", 
    ], 

    plugins: [ 
    [ 
     "react-css-modules", 
     { 
     generateScopedName: "[path]___[name]__[local]___[hash:base64:5]" 
     } 
    ], 
    "transform-object-rest-spread", 
    ], 
    env: { 
    development: { 
     presets: [ 
     "react-hmre" 
     ] 
    } 
    } 
} 

Answer 1

Ayant le même problème ici. La solution de contournement que j'ai trouvée est en utilisant des vars à la place compose.

/* colors.css */ 
:root { 
    --color: #4A90E2 
} 

/* button.css */ 
@import 'colors.css'; 

.button { 
    color: var(--blue); 
} 

Answer 2

J'ai eu ce problème, et a constaté qu'il était résolu en ajoutant cacheDirectory: false

Par exemple webpack.config.js:

... 
module : { 
loaders : [ 
    { 
    test : /\.jsx?/, 
    include : APP_DIR, 
    loader : 'babel-loader', 
    query: 'cacheDirectory=false', 
    }, 
...