CSS-Module 使用

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 {
            // ...
        };
    }
};