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进行绑定

`<``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 官方文档

以上就是本文的全部内容，希望对大家的学习有所帮助