在Angular1.X中使用CSS Modules

在Angular1.5中，增加了一个Component方法，并且定义了组件的若干生命周期hook，在代码规范中也是推崇组件化开发，但是很遗憾的是，CSS模块化组件化的问题并没有得到解决，大部分项目的打包方式还是将所有CSS打包成一个完整的CSS文件，然后插入到html中，这样做的坏处显而易见，如果团队没有良好的CSS代码规范，很容易引起CSS的冲突，本文使用CSS Modules来解决Angular1.X中存在的CSS 冲突问题。

为了便于读者查看并动手操作，我将所有的代码打包成了一个库，首先在本地clone这个库

git clone https://github.com/myzhibie/ng1-css-modules-demo.git

接着安装所需要的依赖

npm install

上述过程如果成功，就可以运行了

gulp serve

在浏览器中查看结果http://localhost:3000

首先查看整个项目目录

client文件夹表示客户端代码，common目录下是一些公用组件，components目录下是非公用的业务组件，generator目录下是生成组件的模板文件，webpack.config.js是项目基础的webpack配置文件，根据开发环境会执行添加到dev或者production配置当中去。

CSS Modules是什么，怎么用

关于CSS Modules是什么，这里不多说，只阐述如何在项目中使用，好处也是显而易见的，就是彻底隔离了组件的CSS和全局的CSS，防止冲突。如果需要对CSS Modules有更深的概念上的认识,请查看官网。

配置webpack中的css-loader,启用css-modules.

在项目根目录下webpack.config.js中，查看如下代码

 1 module.exports = {
 2   devtool: 'sourcemap',
 3   entry: {},
 4   module: {
 5     loaders: [
 6        { test: /\.js$/, exclude: [/app\/lib/, /node_modules/], loader: 'ng-annotate!babel' },
 7        { test: /\.html$/, loader: 'raw' },
 8        { test: /\.scss$/, loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass' },
 9        { test: /\.css$/, loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' }
10     ]
11   },
12   // resolve:{
13   //   modulesDirectories:[bootstrapPath]
14   // },
15   plugins: [
16     // Injects bundles in your index.html instead of wiring all manually.
17     // It also adds hash to all injected assets so we don't have problems
18     // with cache purging during deployment.
19     new HtmlWebpackPlugin({
20       template: 'client/index.html',
21       inject: 'body',
22       hash: true
23     }),
24 
25     // Automatically move all modules defined outside of application directory to vendor bundle.
26     // If you are using more complicated project structure, consider to specify common chunks manually.
27     new webpack.optimize.CommonsChunkPlugin({
28       name: 'vendor',
29       minChunks: function (module, count) {
30         return module.resource && module.resource.indexOf(path.resolve(__dirname, 'client')) === -1;
31       }
32     })
33   ]
34 };

注意查看第8和第9行，对于css和scss文件的处理，使用css-loader并启用了css-modules,importLoaders=1代码该文件被CSS-loader处理之后还会被Style-loader再次处理一次，localIdentName指定了scope css名字生成的规则，这里是[name]代表组件所在目录名，[local]表示本来定义的css名称，[hash:base64:5]代表由css-loader生成的哈希值。这样定义之后，每次遇到css或者sass文件，css-loader都会按照我们指定的方式将组件的css名称改名并引用到html中。

添加Scoped css（Sass）

所谓的scoped css,就是指局部css，在我们的项目中可以理解为单个组件自己的css,不与全局css相混淆。在client/app/components目录下，选定attrs组件，添加attrs.scss,内容如下：

1 //local scope css 定义 
2 .attrs{
3   color:red;
4 } 
5 .header{
6   color:green;
7 }

接着在attrs.controller.js中引入这个sass文件，如下：

1 import styles from "./attrs.scss";
2 class AttrsController {
3   constructor() {
4     this.name = 'Directives利用attrs通信';
5     this.styles=styles;
6   }
7 }
8 
9 export default AttrsController;

第一行import引入进来我们刚才写的css,然后将它赋值给该controller的一个属性叫styles,接着在html中引用我们定义的styles，如下：

1 <navbar>navbar>
2 <div>
3   <h2 class="{{$ctrl.styles.header}}">{{ $ctrl.name }}h2>
4   <directive-b directive-a>directive-b>
5 div>

注意第3行，我们直接使用controller的styles对象加上我们定义的类名（header）来使用绑定类名，结果如下：

可以看到css-loader将我们定义的类名改成了我们指定的模式，并在html中引用了该类，可以查看我们引入的styles对象如下：

基本原理就是css-loader按照我们指定的模式修改每个组件的类名，并在我们import的时候将其打包到js中的一个对象，这个对象的key值是我们定义的原始类名，键值是修改后的类名。

通过查看原始的HTML代码，我们可以发现，css-loader最后将改名后的每个组件的css,全部以