「組成」不與巴別塔 - 插件 - 反應 - CSS-模塊

Question

我想在我的陣營項目中使用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添加一個「組成」，它的工作原理。我看不出有什麼區別我的代碼之間，在演示...

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

這是我.ba​​belrc：

{ 
    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

有同樣的問題在這裏。我發現的解決方法是使用變量來代替組合。

/* 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', 
    }, 
...