在React中使用CSS Modules設置樣式

　　最近，一直在看React。。。那真的是一個一直在學的過程啊，從配置環境webpack，到基礎知識jsx，babel，es6，沒有一個不是之前沒有接觸的。其實，我內心是興奮的啊，畢竟，活着就是要接觸一些新的東西啊，那樣才有意思啊。

　　反正多學點，肯定是沒錯的。哈哈。。。進入正題啦

　　我一看到CSS Modules這個詞我就懵了，畢竟在我印象中，CSS高端一點的就是用SASS，LESS定義變量啊，寫個嵌套什么的，Modules是什么鬼啊。學新東西都是這樣，一開始，好奇在拒絕，堅持看下去，大概就明白了。

1. CSS Modules引入目的

　　寫過CSS的人，應該都對一大長串選擇器選中一個元素不陌生吧，這種方式，其實定義的就是全局樣式，我們時常會因為選擇器權重問題，沒有把我們想要的樣式加上去。

　　另外，每次都需要把所有的樣式表都導入到程序中，如果我們可以像使用js模塊一樣，想用哪塊就用哪塊，是不是就很理想了。

　　CSS Modules就解決了這個問題，它自動為每一個類生成一個哈希值，可以惟一標志這個類，因此避免了我們說的第一個問題，它讓我們可以像使用js模塊那樣，想用哪部分樣式，就引入哪部分樣式。下面我們來具體介紹它的使用方法。

2.CSS Modules使用方法

　　1) 如何在開啟CSS Modules

　　首先，你需要配置好你的webpack環境，因為我們需要webpack的css-loader加載器中配置選項，開啟CSS Modules，你可查看css-loader文檔，你會發現下面這個表格

這就是css-loader的參數表，其中你的webpack-config.js中loader字段中的css-loader配置后面添加modules，就可以開啟CSS Modules。如下圖所示：

　　現在，你已經可以在你的項目中使用CSS Modules功能了。

　　2）CSS Modules用法

　　1.基本使用方法

　　在你的項目中，添加一個CSS文件，然后你就可以像引入js模塊一樣，在你的js文件中引入這個文件存放到一個對象中。這個對象中是一個包含連個屬性的對象，其值就是自動生成的類名。這個類名也會替換頁面中的類名。

/* style.scss */
.bgRed {
    background-color: #f00;
}

/* app/app.js */

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
/* 引入我們定義的.scss文件 */
import styles from '../style/style.scss';

/* 使用無狀態函數定義我們的組件*/
function Title() {
    console.log(styles);
    /* 打印引入的styles，是一個包含連個屬性的對象，其值就是自動生成的類名
        Object {white: "_24PAw-tvdzL8pt4nyAvnJX", bgRed: "_2R9YNZv7rx_o02FHxKTBzC"}
     */
    return (
        /* 在組件中引用 */
        <h1 className={styles.bgRed}>Hello React!</h1>
    );
}

/* 渲染到頁面中 */
ReactDOM.render(<Title />, document.body );

 最終頁面結構，如下圖所示：

　　2. 自定義命名規則

　　上面生稱的類名，完全是自動生成，如果自己自己規定命名規則呢，也是很簡單的，只需要在上面配置modules后面添加&localIdentName＝配置規則，如：

'css-loader?modules&localIdentName=[name]__[local]-[hash:base64:5]' //style__bgRed-2R9YN,local對應所在文件夾名，local對應文件名，最后是哈希值

　　3. 全局類名和本地類名

　　我們可以使用:global(className)來標識這個類是全局類名，因此CSS Modules不對其類名進行轉化，:local(className)則相反，如果不用這兩個包裹的話，默認是local.

/* style.scss */ .bgRed { background-color: #f00; }

// 添加全局bgRed
:global(.bgRed) {
    background-color: #f00;
}

/* app/app.js */ import React, {Component} from 'react'; import ReactDOM from 'react-dom'; /* 引入我們定義的.scss文件 */ import styles from '../style/style.scss'; /* 使用無狀態函數定義我們的組件*/ function Title() { console.log(styles); return ( /* 在組件中全局的bgRed,此時我們可以訪問到我們全局定義的bgRed，它並沒有被轉化 */ <h1 className="bgRed"}>Hello React!</h1>  ); } /* 渲染到頁面中 */ ReactDOM.render(<Title />, document.body );

　　4. 使用composes組合樣式

　　我們知道，node.js中，我們可以用require引入模塊，然后使用它們。CSS Modules也提供了composes來該文件中的樣式規則，甚至引用其它文件中的樣式規則。

　　

/* style/style.scss */

.fontWhite {
    color: #fff;
}
.bgRed {
    composes: fontWhite;
    background-color: #f00;
}

/* app/app.js */

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
/* 引入我們定義的.scss文件 */
import styles from '../style/style.scss';

/* 使用無狀態函數定義我們的組件*/
function Title() {
    console.log(styles);
    /* 打印引入的styles，是一個包含連個屬性的對象，其值就是自動生成的類名
        Object {fontWhite: "style__fontWhite-3jipu", bgRed: "style__bgRed-2R9YN style__fontWhite-3jipu"}rx_o02FHxKTBzC"}
     */
    return (
        /* 在組件中引用 */
        <h1 className={styles.bgRed}>Hello React!</h1>
    );
}

/* 渲染到頁面中 */
ReactDOM.render(<Title />, document.body )

此時，就是添加了兩個類，html結構如下圖：

引入其它文件中的樣式規則，寫composes： className(要引入的類名) from '引入的文件路徑即可'，最終效果同上，composes多少規則，就添加多少類。

 

最后：大家有名有發現，我一直都在類上做文章，那是因為CSS Modules只轉換class名相關的樣式。大家要注意啦。

在最后，給大家提供一個js庫——classnames類庫，給我的感覺和angular中的ng-class差不多，將值為true的類添加上。

 

webpack環境地址：https://github.com/DiligentYe/react-webpack-env