您现在的位置是：课程教程文章

CSS Modules有哪些使用方法

2023-12-13 23:45课程教程文章 人已围观

课程介绍


1、 CSS Modules有哪些使用方法课程推荐

2、 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教程

本文教程操作环境：windows7系统、css3版，DELL G3电脑。

课程教程：CSS Modules有哪些使用方法

上一篇：CSS中in JS是什么意思

下一篇：没有了

其他课程

猜你喜欢

随机推荐

站点信息

  • 文章统计：篇文章