“组成”不与巴别塔 - 插件 - 反应 - 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', 
    }, 
...