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.js 递归组件实现树形菜单
如何解决vue-cli中stylus无法使用的问题
以上就是vue 中如何使用 css modules的详细内容。