css-modulesを設定するには？

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クラスの構造を示します。

このガイドに従うことをお勧めします。本当に簡単です。あなたはmodulesなど?を追加必要css-loader後 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]', 
    }], 

。あなたのスタイルをインポートする必要があるコンポーネントで

：

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; 
}