css modules的用法和在react项目中的应用

参考文章

CSS Modules 的用法

CSS Modules 的功能很单纯，只加入了局部作用域和模块依赖，可以保证某个组件的样式，不会影响到其他组件。

局部作用域

CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效。

产生局部作用域的唯一方法，就是使用一个唯一的 class 的名字，不会与其他选择器重名。这就是 CSS Modules 的做法。

示例代码：

// index.tsx
import React from 'react';
import styles from './index.less'const  Create: React.FC = () => {return <><div className={styles.titleName)></div></>
}

上面代码中，将样式文件 index.less 输入到 style 对象，然后引用 style.titleName 代表一个 class 。

.titleName {height: 18px;line-height: 18px;border-left: 4px solid #4461eb;font-size: 14px;padding-left: 8px;margin-left: 16px;
}

构建工具会将类名 style.titleName 编译成一个哈希字符串。

<div class="titleName___ua3pe">标题
</div>

index.less 也会同时被编译。

.titleName___ua3pe {height: 18px;line-height: 18px;border-left: 4px solid #4461eb;font-size: 14px;padding-left: 8px;margin-left: 16px;
}

这样一来，这个类名就变成唯一的了，只对 Create 组件有效。

CSS Modules 提供各种插件，支持不同的构建工具。上面使用的是 Webpack 的css-loader插件，因为它对 CSS Modules 的支持最好，而且很容易使用。

下面是这个示例的 webpack.config.js 。

module.exports = {entry: __dirname + '/index.js',output: {publicPath: '/',filename: './bundle.js'},module: {loaders: [{test: /\.jsx?$/,exclude: /node_modules/,loader: 'babel',query: {presets: ['es2015', 'stage-0', 'react']}},{test: /\.css$/,loader: "style-loader!css-loader?modules"},]}
};

上面代码中，关键的一行是style-loader!css-loader?modules，它在css-loader后面加了一个查询参数modules，表示打开 CSS Modules 功能。

全局作用域

CSS Modules 允许使用:global(.className)的语法，声明一个全局规则。凡是这样声明的class，都不会被编译成哈希字符串。

使用 css modules 的方式引入的 less 文件，如果需要复写 antd 组件样式，需要加上全局标识：

:global {.ant-upload-select {margin-left: -12px;}.ant-upload-list {position: absolute;width: 80%;left: 24px;top: 0px}
}