«составлен» не работает с модулями babel-plugin-react-css

Question

Я пытаюсь использовать модули css в своем проекте React. Я могу делать такие вещи, как:

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, он работает. Я не вижу, в чем разница между моим кодом и что в демонстрационном ...

Мои 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" 
     ] 
    } 
    } 
} 

Answer 1

Имея та же проблема здесь. Обходной путь, который я нашел, - это использование vars вместо этого.

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

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

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

Answer 2

Я имел эту проблему, и обнаружил, что она была решена путем добавления cacheDirectory: false

Например webpack.config.js:

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