vue 之 css module的使用方法

更新时间：2018年12月04日 09:50:06 作者：pruple_Boy

这篇文章主要介绍了vue 之 css module的使用方法，css module目的为所有类名重新生成类名，有效避开了css权重和类名重复的问题，非常具有实用价值，需要的朋友可以参考下

前言

最近学习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进行绑定

<div>
 <p class="less-color">这是通过less设置的:global字体颜色为粉色</p>
 <p :class="$style.lessFontSize">这是通过less设置的:local字体大小为40px</p>
 <p :class="$style.red">This should be red</p>
 <h4 :class="$style.headerTit">类别推荐</h4>
 <h4 :class="$style['header-tit']">类别推荐</h4>
</div>

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

<style module lang="less">
:global {
 .less-color {
 color: pink;
 }
}
:local {
 .less-font-size {
 font-size: 40px;
 }
 .red {
 color: red;
 }
 .header-tit {
 color: blue;
 }
}
</style>

效果

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

<div>
 <p class="less-color">这是通过less设置的:global字体颜色为粉色</p>
 <p class="index__less-font-size-2QPBO">这是通过less设置的:local字体大小为40px</p>
 <p class="index__red-3YoIm">This should be red</p>
 <h4 class="index__header-tit-3pTz4">类别推荐</h4>
 <h4 class="index__header-tit-3pTz4">类别推荐</h4>
</div>

后记

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

附: vue css module 官方文档

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

您可能感兴趣的文章:

vue中路由重定向redirect问题
这篇文章主要介绍了vue中路由重定向redirect问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
Vue树表格分页的实现方法详解
这篇文章主要介绍了Vue树表格分页的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2022-10-10
vue实现添加与删除图书功能
这篇文章主要介绍了vue实现添加与删除图书功能，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-10-10
vue2使用el-date-picker实现动态日期范围demo
这篇文章主要为大家介绍了vue2使用el-date-picker实现动态日期范围示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
详解如何使用Vue-PDF在应用中嵌入PDF文档
在现代Web应用中，PDF文档的使用非常普遍，因为它可以在各种设备和操作系统上保持一致的外观和格式，本文我们就来探讨一下如何在Vue.js应用中使用vue-pdf库嵌入PDF文档吧
2023-08-08
elementui使用el-upload组件实现自定义上传的详细步骤
upload上传是前端开发很常用的一个功能,在Vue开发中常用的Element组件库也提供了非常好用的upload组件,这篇文章主要给大家介绍了关于elementui使用el-upload组件实现自定义上传的详细步骤,需要的朋友可以参考下
2023-12-12
vue.js绑定事件监听器示例【基于v-on事件绑定】
这篇文章主要介绍了vue.js绑定事件监听器的方法,结合实例形式分析了vue.js基于v-on事件绑定响应鼠标点击相关操作技巧,需要的朋友可以参考下
2018-07-07
深入理解Vue3响应式原理
响应式就是当对象本身(对象的增删值)或者对象属性(重新赋值)发生变化时,将会运行一些函数,最常见的就是render函数,下面这篇文章主要给大家介绍了关于Vue3响应式原理的相关资料,需要的朋友可以参考下
2022-12-12
vue element-ui实现input输入框金额数字添加千分位
这篇文章主要介绍了vue element-ui实现input输入框金额数字添加千分位,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-12-12
Vue实现轮播图组件的封装
Vue轮播图组件的封装可通过封装组件、使用插件、配置化等方式实现，主要包括图片预加载、定时轮播、无限滚动、手势滑动、响应式布局等功能，实现方式可使用Vue的生命周期函数、自定义事件、计算属性等技术
2023-04-04