在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中，查看如下代碼

module.exports = {
  devtool: 'sourcemap',
  entry: {},
  module: {
    loaders: [
       { test: /\.js$/, exclude: [/app\/lib/, /node_modules/], loader: 'ng-annotate!babel' },
       { test: /\.html$/, loader: 'raw' },
       { test: /\.scss$/, loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass' },
       { test: /\.css$/, loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' }
    ]
  },
  // resolve:{
  //   modulesDirectories:[bootstrapPath]
  // },
  plugins: [
    // Injects bundles in your index.html instead of wiring all manually.
    // It also adds hash to all injected assets so we don't have problems
    // with cache purging during deployment.
    new HtmlWebpackPlugin({
      template: 'client/index.html',
      inject: 'body',
      hash: true
    }),

    // Automatically move all modules defined outside of application directory to vendor bundle.
    // If you are using more complicated project structure, consider to specify common chunks manually.
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module, count) {
        return module.resource && module.resource.indexOf(path.resolve(__dirname, 'client')) === -1;
      }
    })
  ]
};

注意查看第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,內容如下：

//local scope css 定義 
.attrs{
  color:red;
} 
.header{
  color:green;
}

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

import styles from "./attrs.scss";
class AttrsController {
  constructor() {
    this.name = 'Directives利用attrs通信';
    this.styles=styles;
  }
}

export default AttrsController;

第一行import引入進來我們剛才寫的css,然后將它賦值給該controller的一個屬性叫styles,接着在html中引用我們定義的styles，如下：

<navbar></navbar>
<div>
  <h2 class="{{$ctrl.styles.header}}">{{ $ctrl.name }}</h2>
  <directive-b directive-a></directive-b>
</div>

注意第3行，我們直接使用controller的styles對象加上我們定義的類名（header）來使用綁定類名，結果如下：

可以看到css-loader將我們定義的類名改成了我們指定的模式，並在html中引用了該類，可以查看我們引入的styles對象如下：

基本原理就是css-loader按照我們指定的模式修改每個組件的類名，並在我們import的時候將其打包到js中的一個對象，這個對象的key值是我們定義的原始類名，鍵值是修改后的類名。

通過查看原始的HTML代碼，我們可以發現，css-loader最后將改名后的每個組件的css,全部以<style>的方式插入到html的header中，便於頁面的引用，如下

以上就是CSS Modules的基本原理

驗證是否存在CSS沖突

前面我們在attrs組件中添加了一個.header類，值為color：green，接着我們以同樣方式在about組件中添加一個.header類，值為 color: red;結果如下：

attrs組件

about組件

可以看到盡管我們定義的原始類名都是.header,但是被css-loader修改后的類名是不一樣的，所以在每個組件下定義的類即使同名也是不會發生沖突的，這就是scoped css的原理。

global css

我們實現了scoped css,又會問如果我想給全局添加一css怎么辦呢？其實很簡單，global css的實現引入方式和scoped css並沒有區別，只是在類的定義上有區別，如下，在app目錄下定義一個app.scss文件，內容如下：

body {
    font-size: 20px;
}

:global {
    .index {
      display:inline-block;
      margin-top: 20px;
    }
}

注意第五行，使用：global定義的就是一個全局類，在項目任何地方都可以使用，比如我們在about組件中定義了一個directive，就可以在這個directive中使用index類，如下：

function aDirective(homeService,$rootScope) {
    "ngInject";
    return {
        restrict: 'E',
        template: `name:<input type='text' ng-model='showValue' class='about'>
  <br><button ng-click="addName()" class="index">addName</button>`,
        link: (scope, element, attrs) => {
            scope.addName = () => {
                if(scope.showValue){
                    $rootScope.$broadcast('addName',scope.showValue);
                }        
            }
        }
    };
}

export default aDirective;

注意第六行，就是直接指定類名為index,結果如下：

 

在css modules中使用sass嵌套定義類名

對於大型項目來講，很少有直接使用css的，通常都是使用一些CSS預處理器，比如說Sass,在Sass中，通常類之間可以嵌套定義，配合CSS Modules,也是能夠靈活使用，比如在about組件中，定義about.scss嵌套類名如下：

//嵌套定義,只需要寫類名即可，不需要嵌套調用
.sec {
    .about {
        display: inline-block;
        margin-bottom: 10px;
    }
}

.header {
    color: red;
}

我們定義了一個.sec類，並且在該類下定義了一個嵌套的about類，在html中使用如下：

<navbar></navbar>
<h2 class="{{$ctrl.styles.header}}">{{ $ctrl.name }}</h2>
<section class="{{$ctrl.styles.sec}}">
  <event-adirective class="{{$ctrl.styles.about}}"></event-adirective>
  <event-bdirective></event-bdirective>
</section>

注意第4行，我們並沒有在使用about類的時候，在前面加上sec，這說明CSS Modules 在處理styles對象的時候認為所有類的類名都是平級關系，盡管它們在定義的時候是嵌套定義的，但是要讓這些嵌套類起作用，必須按照嵌套的結構來添加類，結果如下：

 

使用CSS Modules的多個css文件合並功能

由於CSS Modules的主要思想是使用js來處理CSS，那么對於不同的CSS我們可以將其合並成一個styles對象，例如在ctrls組件中，定義兩個sass文件，

a.scss

//多個scss文件合並
.aCtrls{
  color: purple;
}

ctrls.scss

.ctrls {
    button {
        display: inline-block;
        margin: 20px;
    }
}

在ctrls.controller.js中進行合並

let styles={};
import aStyle from './a.scss';
import bStyle from './ctrls.scss';
Object.assign(styles,aStyle,bStyle);
class CtrlsController {
  constructor() {
    this.name = 'directive通過Controllers通信';
    this.styles=styles;
  }
}

export default CtrlsController;

在1到4行，通過引入不同的styles文件，並將它們合並為一個對象，然后在ctrls.html中使用

<navbar></navbar>
<div>
  <h1 class='{{$ctrl.styles.aCtrls}}'>{{ $ctrl.name }}</h1>
  <a-ctrl-directive>
  <div>
    <div>
      <b-ctrl-directive class='{{$ctrl.styles.ctrls}}'></b-ctrl-directive>
    </div>
    </div>
  </a-ctrl-directive>

</div>

和使用一個sass文件定義的在使用上完全沒有任何區別。

以上就是CSS Modules在Angular1.X項目中的使用，我們還可以結合PostCSS讓它在功能上更加強大，進一步使用可以參考這里