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 = () => (
    

        

    
);

5. 局部作用域的类与全局作用域的嵌套

//               

.app{
    :global {
        .global-style{
            // ...
        }
    }
}

//             

:global {
    .global-style{
        :local .local-style {
            // ...
        };
    }
};