好资源导航 » 文章资讯 » vue 之 css module的使用方法

vue 之 css module的使用方法

2023-09-04 23:29:04 65

前言

最近学习webpack看到了一个新鲜的东西，之前都是通过scoped来区别类名，秉着任何时候学习都不晚的心情，作为小白的我也想揭揭cssmodule的神秘面纱。

cssmodule目的为所有类名重新生成类名，有效避开了css权重和类名重复的问题。相比于scoped为类名添加一个hash标识效果优秀不少，但相对的书写会繁琐一些。

项目基于cli3搭建，讲真的，我也是被cli3鬼迷心窍了。相比2的繁琐，3提供界面管理对我这样子的小白确实直观很多，而且需要配置vue.config.js也十分合适呢。

开工

动手之前先配置项目，网上很多文章说需要下载css-loader插件，Vue中的vue-loader已经集成了CSSModules，因此删掉也能正常运行

在vue.config.js中添加如下配置

css:{
loaderOptions:{
css:{
localIdentName:'[name]__[local]-[hash:base64:5]',
camelCase:true
}
}
}

特别注意：cssmodule所有类名都要:class进行绑定


这是通过less设置的:global字体颜色为粉色
这是通过less设置的:local字体大小为40px
Thisshouldbered
类别推荐
类别推荐

样式表需要添加module，可以通过console.log(this.$style);输出当前所有的:local{}类名。默认是:local{}，即:local前缀是可以省略的，若要全局类名则资额在:global{}内


:global{
.less-color{
color:pink;
}
}
:local{
.less-font-size{
font-size:40px;
}
.red{
color:red;
}
.header-tit{
color:blue;
}
}

效果

和配置一样：当前文件名称，local是当前定义的类名名，hash是hash生成的字符串，长度为5；true：支持大驼峰也支持中括号命名


这是通过less设置的:global字体颜色为粉色
这是通过less设置的:local字体大小为40px
Thisshouldbered
类别推荐
类别推荐

后记

过程还是蛮曲折的，小白就是道阻且长啊，不过我相信积少成多，会有蜕变的一天的。

附:vuecssmodule官方文档

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。