CSS 모듈을 설정하는 방법은 무엇입니까?

Question

Official documentation 너무 복잡하고 나를 위해 일하지 않는 길. 누구든지 webpack을 사용하여 css-modules을 설정하는 좋은 기사를 알고 있습니까?

react-css-modules는

업데이트 여기

내 모듈 구성은 하나에게 도움이되지 않았다. 내 목표에 도달하는 동안 편집되었으므로 원본과 다릅니다.

module: { 
    rules: [ 
     { test: /\.js$/, exclude: /node_modules/, loader: "react-hot-loader!babel-loader" }, 
     { 
      test: /\.scss$/, 
      use: [{ 
       loader: "style-loader" 
      }, { 
       loader: "css-loader" 
      }, { 
       loader: "sass-loader" 
      }] 
     }, { 
      test: /\.png$/, 
      loader: 'file-loader?name=[name]--[hash].[ext]', 
     } 
    ], 
    loaders: [{ 
     test: /\.css/, 
     loader: 'style-loader!css-loader&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 
    }, { 
     test: /\.html$/, 
     loader: 'file-loader', 
    }] 
}, 

Answer 1

그것은

당신은 스타일 로더, CSS-로더 및 설정 모듈 모드를 필요로 매우 간단합니다.

{ 
    test: /\.css$/, 
    loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 
} 

이와 비슷합니다. 여기에서 [name]__[local]___[hash:base64:5]은 webpack에서 생성하는 CSS 클래스의 구조를 나타냅니다.

나는이 가이드를 따르는 것이 좋습니다. 정말 간단합니다. https://github.com/css-modules/webpack-demo

Answer 2

loaders: [{ 
    test: /\.css$/, 
    loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]', 
    }], 

는 css-loader 후 등등 ? 다음 modules 등을 추가해야합니다. 당신이 스타일을 가져와야 구성 요소에서

:

import style from './App.css'; 

스타일 - 그냥 선택기에 등록하는 일치와 객체의.

및 사용 구성 요소의

그렇게 보이는 :

const App = props => ( 
<header className={style.header}> 
    <Link to="/" className={style.link}>Awesome blog</Link> 
</header>); 

App.css 그렇게 보이는 :

.header { 
    font-size: 35px; 
    text-align: center; 
    line-height: 1.3; 
}