vue之cssmodule的使用方法

前言

创新互联 - 德阳服务器托管,四川服务器租用,成都服务器租用,四川网通托管,绵阳服务器托管,德阳服务器托管,遂宁服务器托管,绵阳服务器托管,四川云主机,成都云主机,西南云主机,德阳服务器托管,西南服务器托管,四川/成都大带宽,成都机柜租用,四川老牌IDC服务商

最近学习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

类别推荐
类别推荐

后记

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

附: vue css module 官方文档

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。


网站名称:vue之cssmodule的使用方法
URL链接:http://myzitong.com/article/jdoope.html