vue 之 css module的使用方法

数据库小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《vue 之 css module的使用方法》带大家来了解一下vue 之 css module的使用方法，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

动手之前先配置项目，网上很多文章说需要下载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字体颜色为粉色``p``>`
`这是通过less设置的:local字体大小为40px``p``>`
`This should be red``p``>`
`类别推荐``h4``>`
`类别推荐``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：支持大驼峰也支持中括号命名

``
`这是通过less设置的:global字体颜色为粉色``p``>`
`这是通过less设置的:local字体大小为40px``p``>`
`This should be red``p``>`
`类别推荐``h4``>`
`类别推荐``h4``>`
```div``>`

后记

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

附: vue css module 官方文档

到这里，我们也就讲完了《vue 之 css module的使用方法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于mysql的知识点！