Vue 中使用 CSS Modules优雅方法

CSS Modules：局部作用域 & 模块化

CSS Modules 为每一个局部类赋予全局唯一的类名，这样组件样式间就不会相互影响了。如：

它会被转换为类似这样：

当导入一个 CSS 模块文件时，它会将局部类名到全局类名的映射对象提供给我们。就像这样：

vue-css-modules ：简化类名映射

下面是一个使用了 CSS Modules 的按钮组件：

的确，CSS Modules 对于 Vue 组件是一个不错的选择。但也存在以下几点不足：

• 你必须在 data 中传入 styles
• 你必须使用 styles.localClassName 导入全局类名
• 如果有其他全局类名，你必须将它们放在一起
• 如果要和组件的属性值绑定，就算局部类名和属性名一样，也要显式指定

对于上面的按钮组件，使用 vue-css-modules 后：

现在：

• 你不必在 data 中传入 styles ，但得在 mixins 中传入 styles :full_moon_with_face:
• 你可以跟 styles.localClassName 说拜拜了
• 将局部类名放在 styleName 属性，全局类名放在 class 属性，规整了许多
• 局部类名绑定组件同名属性，只需在其前面加上 : 修饰符

修饰符

@button

这等同于：

这让你能在外部重置组件的样式：

$type

这等同于：

:mini

这等同于：

这等同于：

使用方法

在 Vue 模板中使用

引入模板外部的 CSS 模块

使用模板内部的 CSS 模块

在 Vue JSX 中使用

在 Vue 渲染函数中使用

总结

以上所述是小编给大家介绍的Vue 中使用 CSS Modules优雅方法。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!