如何設置css模塊？

Question

官方文檔太復雜了，對我不起作用。 有誰知道任何好的文章，如何使用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;
}