은 "babel-plugin-react-css-modules"로 작동하지 않습니다.

Question

React 프로젝트에서 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에 "composes"를 추가하면 작동합니다. 내가 ... 차이가 데모에 내 코드 사이 것이 무엇인지 표시되지 않습니다

내 웹팩 로더

은 다음과 같습니다

{ 
    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

갖는

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입니다 같은 문제는 여기에. 내가 찾은 해결 방법은 대신 vars를 사용하여 작성합니다.

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

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

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

Answer 2

나는이 문제를 가지고 있었고, 그것이 예를 webpack.config.js를 들어 cacheDirectory: false

을 추가하여 해결 된 것을 발견 :

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