让前端飞前端技术分享

vue 之 css module的使用方法

2018-12-17  本文已影响9人  老王420

动手之前先配置项目,网上很多文章说需要下载css-loader插件,Vue中的vue-loader已经集成了 CSS Modules,因此删掉也能正常运行

在vue.config.js中添加如下配置

`css: {`
`loaderOptions: {`
`css: {`
`localIdentName:` `'[name]__[local]-[hash:base64:5]'``,`
`camelCase:` `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 官方文档

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

上一篇下一篇

猜你喜欢

热点阅读