CSS Modules有哪些使用方法

1、定义css文件。

.className{
color:green;
}
/*编写全局样式*/
:global(.className){
color:red;
}

/*样式复用*/
.otherClassName{
composes:className;
color:yellow;
}

.otherClassName{
composes:classNamefrom"./style.css";
}

2、在js模块中导入css文件。

importstylesfrom"./style.css";

element.innerHTML='<divclass="'+styles.className+'">';

3、配置css-loader打包。CSS Modules不能直接使用，而是需要进行打包。

一般通过配置 css-loader 中的modules属性即可完成css modules的配置。

//webpack.config.js
module.exports={
module:{
rules:[
{
test:/\.css$/,
use:{
loader:'css-loader',
options:{
modules:{
//自定义hash名称
localIdentName:'[path][name]__[local]--[hash:base64:5]',
}
}
}
]
}
};

4、最终打包出来的css类名就是由一长串hash值生成。

._2DHwuiHWMnKTOYG45T0x34{
color:red;
}

._10B-buq6_BEOTOl9urIjf8{
background-color:blue;
}

以上就是CSS Modules的使用方法，希望对大家有所帮助。更多css学习指路：css教程