许多项目会引入Bootstrap、Materialize等框架，它们是普通的、全局的css。另外，你也大概本身会写一些普通css。如何共存呢？CSS Modules团队成员对此提到过：
a CSS Module should only import information relative to it
意思是，发起把CSS Modules看做一种新的css，和本来的普通css区分隔来。好比，composes的时候，不要从那些普通的css里去取。
在css-loader里通过指定test、include、exclude来区分它们。保持CSS Modules的纯净，只有想要应用CSS Modules的css文件，才启用CSS Modules。
只转换class和id
颠末我本身的测试，CSS Modules只转换class和id，另外的标签选择符、伪类等都不会被转换。
发起只利用class。
一个CSS Module的输出
简朴用console.log()就可以查察CSS Module的输出：
var styles = require("./main.css"); console.log("styles = ", styles);
功效雷同这样：
{ "btn-sp": "_2SCQ7Kuv31NIIiVU-Q2ubA _2r6eZFEKnJgc7GLy11yRmV", title: "_1m-KkPQynpIso3ofWhMVuK" }
这可以辅佐领略CSS Modules是奈何事情的。
预编译器
sass等预编译器也可以用CSS Modules，对应的loader大概是这样：
{ test: /\.scss$/, loader: 'style!css?modules!resolve-url!sass?sourceMap' }
留意不要因为是sass就习惯性地用嵌套写法，CSS Modules并不适合利用包括选择符。
发起的定名方法
CSS Modules会把.title转换为styles.title，由于后者是用在javascript中，因此驼峰定名会更适合。
假如像我之前那样写.btn-sp，需要留意在javascript中写为styles["btn-sp"]。
另外，你还可觉得css-loader增加camelCase参数来实现自动转换：
{ test: /\.css$/, loader: 'style!css?modules&camelCase', }
这样即便你写.btn-sp，你也可以直接在javascript里用styles.btnSp。
结语
无论是一直以来我们当真遵循的定名约定，照旧这个新的CSS Modules，目标都是一样的：可维护的css代码。我以为就CSS Modules根基照旧在写css这一点来说，它照旧很友好的。
固然本文为了严谨，功效写了相当长的篇幅，但但愿你读过之后，还能以为CSS Modules是简朴易懂的。因为这样，我就告竣我的目标：扣题，了。