Vue 中使用 CSS Modules优雅方法

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

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

/* button.css */
.button {
 font-size: 16px;
}
.mini {
 font-size: 12px;
}

它会被转换为类似这样：

/* button.css */
.button__button--d8fj3 {
 font-size: 16px;
}
.button__mini--f90jc {
 font-size: 12px;
}

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

import styles from \'./button.css\'
// styles = {
// button: \'button__button--d8fj3\',
// mini: \'button__mini--f90jc\'
// }
element.innerHTML = \'<button class=\"\' + styles.button + \' \' + styles.mini + \'\" />\'

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

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

<template>
 <button :class=\"{
 \'global-button-class-name\': true,
 [styles.button]: true,
 [styles.mini]: mini
 }\">点我</button>
</template>
<script>
 import styles from \'./button.css\'

 export default {
 props: { mini: Boolean },
 data: () => ({ styles })
 }
</script>

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

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

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

<template>
 <button
 class=\"global-button-class-name\"
 styleName=\"button :mini\">
 点我
 </button>
</template>
<script>
 import CSSModules from \'vue-css-modules\'
 import styles from \'./button.css\'

 export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean }
 }
</script>

现在：

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

修饰符

@button

<button styleName=\"@button\">按钮</button>

这等同于：

<button styleName=\"button\" data-component-button=\"true\">按钮</button>

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

.form [data-component-button] {
 font-size: 20px;
}

$type

<button styleName=\"$type\">按钮</button>

这等同于：

<button :styleName=\"type\">按钮</button>

:mini

<button styleName=\":mini\">按钮</button>

这等同于：

<button :styleName=\"mini ? \'mini\' : \'\'\">按钮</button>
disabled=isDisabled
<button styleName=\"disabled=isDisabled\">按钮</button>

这等同于：

<button :styleName=\"isDisabled ? \'disabled\' : \'\'\">按钮</button>

使用方法

在 Vue 模板中使用

引入模板外部的 CSS 模块

<template>
 <button
 class=\"global-button-class-name\"
 styleName=\"button :mini\">
 点我
 </button>
</template>
<script>
 import CSSModules from \'vue-css-modules\'
 import styles from \'./button.css\'
 export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean }
 }
</script>

使用模板内部的 CSS 模块

<template>
 <button
 class=\"global-button-class-name\"
 styleName=\"button :mini\">
 点我
 </button>
</template>
<script>
 import CSSModules from \'vue-css-modules\'

 export default {
 mixins: [CSSModules()],
 props: { mini: Boolean }
 }
</script>
<style module>
 .button {
 font-size: 16px;
 }
 .mini {
 font-size: 12px;
 }
</style>

在 Vue JSX 中使用

import CSSModules from \'vue-css-modules\'
import styles from \'./button.css\'
export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean },
 render() {
 return (
  <button styleName=\"@button :mini\">点我</button>
 )
 }
}

在 Vue 渲染函数中使用

import CSSModules from \'vue-css-modules\'
import styles from \'./button.css\'

export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean },
 render(h) {
 return h(\'button\', {
  styleName: \'@button :mini\'
 }, \'点我\')
 }
}

以上所述是小编给大家介绍的Vue 中使用 CSS Modules优雅方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！