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

原文作者是Preact的作者

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

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

文件结构

components/
- foo/
  - index.js
  - style.less

样式

首先，我们来写点less

.foo {
    padding: 10px;

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

…非常常见的less代码。类名也是很通用的那种，看起来不是很差，但是Css Modules要给每个样式规则都加上命名空间来让规则冲突几乎不可能发生。

引入 CSS Modules

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

import style from './style.less';

export default class Foo 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：

module: {  
  loaders: [
    {
      test: /\.(less|css)$/,
      loader: [
        'style',
        'css?modules&importLoaders=1',
        'less'   // if you want .less support
      ].join('!')
    }
  ]
}

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

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

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