css module

一. 简介

css module引入了局部作用域和模块依赖。它的原理是编译成独一无二的class类名，不会与其他选择器重名。

css module 提供各种插件，支持不同的构建工具。比如webpack的css-loader插件，需要配置成'css-loader?module'开启module模式。

二. 全局作用域

css module可以通过配置：global(classname),来声明一个全局的class。其原理就是凡是这种带有global的classname都不会被编译成哈希字符串，使其在全局起作用。

eg:   :gloabl(.float_l) { float: left };

三. 局部作用域

cdd module通过将类名或者id名编译成哈希字符串，使其之间不会相互冲突，达到生成局部作用域的目的。

eg: .title { color： blue; }  // ./index.css

      import style from './index.css';

     

蓝色的字

// ./index.js

以上，构建工具会吧index.css中的title编译成哈希字符串，同时index.js中对title的引用也会被编译成对应的哈希字符串。达到不和其他类名冲突的目的。

css module 还提供了一种显示的局部作用域写法： ：local(.className)。

四. 定制哈希类

css module插件的哈希是可以定制的。通过配置css module插件。比如通过配置css-loader插件。

eg:   css-loader?module&localIdentName=[path][name]-[local]-[hash:base64:5]

五. 类名（class）的组合（继承）

在css module中，提供选择器之间相互继承的规则。比如让  .title继承.className

eg： .className: { font-size: 10px }; .title { composes: className ; color: red };

如上：此时title中就有了font-size：10px;这样的属性。

也可以继承自其它模块

eg: .title { composes: className from './other.css' } ;

如上就让当前css文件中的title类继承了other文件下的className类的属性了。

六. 输入变量

css module在postCSS的支持下，可以定义变量。需要配置postcss相关插件。

eg:   @value blue: #0c77f8;     .title { color: blue };

此时title就相当于color: '#0c77f8';