1. CSS Modules引入目的
寫過CSS的人，應該都對一大長串選擇器選中一個元素不陌生吧，這種方式，其實定義的就是全局樣式，我們時常會因為選擇器權重問題，沒有把我們想要的樣式加上去。
另外，每次都需要把所有的樣式表都導入到程序中，如果我們可以像使用js模塊一樣，想用哪塊就用哪塊，是不是就很理想了。
CSS Modules就解決了這個問題，它自動為每一個類生成一個哈希值，可以惟一標志這個類，因此避免了我們說的第一個問題，它讓我們可以像使用js模塊那樣，想用哪部分樣式，就引入哪部分樣式。下面我們來具體介紹它的使用方法。
2.CSS Modules使用方法
1) 如何在開啟CSS Modules
create-react-app 腳手架 引入 css-modules
modules:true, localIdentName:'[name]__[local]__[hash:base64:5]'
webpack.config.dev.js
{
test: /\.less$/,
exclude: /node_modules|antd\.css/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules:true,
localIdentName:'[name]__[local]__[hash:base64:5]'
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
{
loader: require.resolve('less-loader') // compiles Less to CSS
}
],
},
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
webpack.config.prod.js
{
test: /\.less$/,
exclude: /node_modules|antd\.css/,
loader: ExtractTextPlugin.extract(
Object.assign(
{
fallback: {
loader: require.resolve('style-loader'),
options: {
hmr: false,
},
},
use: [
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules:true,
localIdentName:'[name]__[local]__[hash:base64:5]',
minimize: true,
sourceMap: shouldUseSourceMap,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
{
loader: require.resolve('less-loader') // compiles Less to CSS
}
],
},
extractTextPluginOptions
)
),
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(
Object.assign(
{
fallback: {
loader: require.resolve('style-loader'),
options: {
hmr: false,
},
},
use: [
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
minimize: true,
sourceMap: shouldUseSourceMap,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
extractTextPluginOptions
)
),
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},
2）CSS Modules用法
1.基本使用方法
在你的項目中，添加一個CSS文件，然后你就可以像引入js模塊一樣，在你的js文件中引入這個文件存放到一個對象中。這個對象中是一個包含連個屬性的對象，其值就是自動生成的類名。這個類名也會替換頁面中的類名。
style.scss
/* style.scss */
.bgRed {
background-color: #f00;
}
app/app.js
/* 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
/* style.scss */
.bgRed {
background-color: #f00;
}
// 添加全局bgRed
:global(.bgRed) {
}
app/app.js
/* 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
/* style/style.scss */
.fontWhite {
color: #fff;
}
.bgRed {
composes: fontWhite;
background-color: #f00;
}
app/app.js
/* 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的類添加上。