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

原文链接：How Css Modules Work

原文作者是Preact的作者

这是一篇关于如何使用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 ( 大专栏  每日一译系列-模块化css怎么玩(译文)> <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]

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