版权声明:转载请注明原文地址 https://blog.csdn.net/mjzhang1993/article/details/82693003
CSS-Module 使用
说明
CSS-Module 是一个 css 模块化解决方案,可以通过webpack 在 css-loader 配置 css-module ,开启后默认局部作用域
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true, // 开启 css-module
localIdentName: '[hash:base64:6]'
}
},
'postcss-loader'
]
}
1. :global(.class|#id) 声明全局规则
:global(#box) {
}
:global{
#box{
}
}
2. :local(.class) 在局部作用域中声明选择器,建议使用驼峰式命名,这样可以更容易在 js 中引用
3. composes: className 用来组合其他类
:local(.className) {
// ...
}
:local(.cn) {
composes: className; // 组合局部作用域的规则
// composes: className from 'xxx.css'; // 组合其他文件中的规则
}
4. js 中引用
在样式中嵌套的类,在 js 中使用时还是直接通过 styles.className 找到
import styles from 'index.less';
export default const Index = () => (
<div className={styles.appContainer}>
<div className={styles.appBody}></div>
</div>
);
5. 局部作用域的类与全局作用域的嵌套
// 在局部作用域中嵌套全局作用域
.app{
:global {
.global-style{
// ...
}
}
}
// 全局作用域中套局部作用域
:global {
.global-style{
:local .local-style {
// ...
};
}
};