这是一篇关于如何使用Css Modules的快速介绍，使用到的工具是Webpack吊炸的css-loader

首先，我们明确一下本文的方针。我们想要和我们的组件一起使用css，因为在某种水平上他们已经耦合在一起了。我今天会用less，但是用纯挚的css，或者Scss等等也是一样的。

文件布局

components/

foo/

index.js

style.less

样式

首先，我们来写点less

1
2
3
4
5
6
7
8
  .foo {
padding: 10px;

header.bar {
color: black;
font-size: 200%;
}
}
 

…非每每见的less代码。类名也是很通用的那种，看起来不是很差，但是Css Modules要给每个样式法则都加上定名空间来让法则斗嘴几乎不成能产生。

引入 CSS Modules

为了使用模块化的CSS，我们得引入样式。这个过程会将所有的样式法则从less翻译到css，给所有的类加上定名空间。就像凡是的引入一样，css-loader会把样式注入到组件文件中。最重要的一个差别点在于从import返回了一个值，这个值是一个东西，里面存储着本地的css类名和他们的带有定名空间的版本。

1
2
3
4
5
6
7
8
9
10
11
12
  import style from './style.less';

export default class extends Component {
render() {
return (
<div class={ style.foo }>
<header class={ style.bar }>Sup</header>
etc
</div>
);
}
}
 

如果你想输出这个style，也就是console.log(style)，，除了把css注入到你的文件之外，import语句会返回 一个存储着类名和本地类名映射的东西。

1
2
  console.log(style);
{ foo:"foo_foo_abcde", bar:"foo_bar_abcde" }
 

这是怎么事情的：当你引入less/css/scss文件的时候，它会被当做一个样式文件添加到当前组件（固然啦，这事有css-loader内部措置惩罚惩罚的）。你的类名会被翻译成本地的带有定名空间的类名。你可以控制这个过程，最常见的要领就是把.class转换成filename_clas_[hash:0:5]。这回让定名空间凭据文件名分类，凭据hash区分版本,而且还是可读的，因为原始的类名也还在。

总结起来意思就是说当你在你的JSX(或者其他形式的符号语言)中设置了class={style.foo}实际上你是添加一个本地的类名class="foo_foo_abcde"。

想让这一切都事情起来，你得报告css-loader你想使用Css Modules：

1
2
3
4
5
6
7
8
9
10
11
12
  module: {
loaders: [
{
test: /.(less|css)$/,
loader: [
'style',
'css?modules&importLoaders=1',
'less'
].join('!')
}
]
}
 

如果你想定制引入的本地的名称,你可以供给一个简单的模板字符串给localIdentName选项：

1
  css?modules&importLoaders=1&localIdentName=[local]_[hash:base64:5]
 

想想看是不是真的这么做？

每日一译系列-模块化css怎么玩(译文)