如何设置 css 模块？答案

【问题标题】：How to set up css-modules?如何设置 css 模块？
【发布时间】：2017-09-14 18:20:49
【问题描述】：

Official documentation 太复杂了，不适合我。有谁知道如何用 webpack 设置 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',
    }]
},

【问题讨论】：

标签： javascript webpack css-modules react-css-modules

【解决方案1】：

其实很简单

你需要 style-loader、css-loader 和设置模块模式。

{
  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

【讨论】：

这就是我所做的，我的 css 类仍然没有前缀
你能分享你的 webpack 配置吗？

【解决方案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';

style - 它只是具有与选择器匹配的属性的对象。

组件中的用法看起来是这样的：

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

【讨论】：