最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
vue中css module的使用教程
时间：2022-06-25 15:27:22 编辑：袖梨 来源：一聚教程网
前言
最近学习webpack看到了一个新鲜的东西，之前都是通过scoped来区别类名，秉着任何时候学习都不晚的心情，作为小白的我也想揭揭css module的神秘面纱。
css module目的为所有类名重新生成类名，有效避开了css权重和类名重复的问题。相比于scoped为类名添加一个hash标识效果优秀不少，但相对的书写会繁琐一些。
项目基于cli3搭建，讲真的，我也是被cli3鬼迷心窍了。相比2的繁琐，3提供界面管理对我这样子的小白确实直观很多，而且需要配置vue.config.js也十分合适呢。
开工
动手之前先配置项目，网上很多文章说需要下载css-loader插件，Vue中的vue-loader已经集成了 CSS Modules，因此删掉也能正常运行
在vue.config.js中添加如下配置
css: {
loaderOptions: {
css: {
localIdentName: '[name]__[local]-[hash:base64:5]',
camelCase: true
}
}
}
- localIdentName是格式化类名：name是当前文件名称，local是当前定义的类名名，hash是hash生成的字符串，长度为5
- camelCase：在类名有中横线时，'only'在标签上绑定类名时只支持大驼峰，true：支持大驼峰也支持中括号命名
特别注意：css module所有类名都要:class进行绑定
这是通过less设置的:global字体颜色为粉色
这是通过less设置的:local字体大小为40px
This should be red
类别推荐
类别推荐
样式表需要添加module，可以通过console.log(this.$style);输出当前所有的:local { }类名。默认是:local { }，即:local前缀是可以省略的，若要全局类名则资额在:global { }内
效果
和配置一样：当前文件名称，local是当前定义的类名名，hash是hash生成的字符串，长度为5；true：支持大驼峰也支持中括号命名
这是通过less设置的:global字体颜色为粉色
这是通过less设置的:local字体大小为40px
This should be red
类别推荐
类别推荐
后记
过程还是蛮曲折的，小白就是道阻且长啊，不过我相信积少成多，会有蜕变的一天的。相关文章
- 王者荣耀侦探能力大测试攻略 王者荣耀侦探能力大测试怎么过 11-22
- 无期迷途主线前瞻兑换码是什么 11-22
- 原神欧洛伦怎么培养 11-22
- 炉石传说网易云音乐联动怎么玩 11-22
- 永劫无间手游确幸转盘怎么样 11-22
- 无期迷途主线前瞻兑换码是什么 无期迷途主线前瞻直播兑换码介绍 11-22