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优雅方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

您可能感兴趣的文章:

  • 在vue中使用css modules替代scroped的方法
  • 详解vue+css3做交互特效的方法
  • Vue2.0设置全局样式(less/sass和css)
  • vue中配置mint-ui报css错误问题的解决方法
  • 深入理解vuex2.0 之 modules
(0)

相关推荐

  • 详解vue+css3做交互特效的方法

    1.前言 做项目就难免会开发交互效果或者特效,而我最近开发的项目一直在使用vue,开发技术栈方面,理所当然就使用了vue+css3开发,过程中发现使用vue+css3开发特效,和javascript/jquery+css3的思维方式不一样,但是比javascript/jquery+css3简单一点点.今天就分享三个简单的小实例,希望能起到拓展思维的作用,让大家明白vue+css3应该怎样开发交互效果!如果大家有什么好的建议,或者觉得我哪里写错了,欢迎指出! 1.文章上面的代码,虽然代码很简单,不

  • 深入理解vuex2.0 之 modules

    什么是module? 背景:在Vue中State使用是单一状态树结构,应该的所有的状态都放在state里面,如果项目比较复杂,那state是一个很大的对象,store对象也将对变得非常大,难于管理. module:可以让每一个模块拥有自己的state.mutation.action.getters,使得结构非常清晰,方便管理. 怎么用module? 一般结构 const moduleA = { state: { ... }, mutations: { ... }, actions: { ...

  • vue中配置mint-ui报css错误问题的解决方法

    在vue2.0中引入了mint-ui后总是报一个css的错误 但是package.json中已经配置了css-loader style-loader ,webpack.config中也已经配置了css,还是报这个错误,相反,如果把webpack.config中css的配置注释掉就不会出错,这是为什么呢? 因为 在webpack.config中没有设置好css引入的目录,因为默认情况下我们只会引入/src/目录下的css, 但是mint-ui是要冲node_modules目录去引入的,所以在web

  • 在vue中使用css modules替代scroped的方法

    前面的话 css modules是一种流行的模块化和组合CSS的系统. vue-loader提供了与css modules的集成,作为scope CSS的替代方案.本文将详细介绍css modules 引入 最开始使用Vue的时候,提倡并大量使用的是scoped这种技术 <style scoped> @media (min-width: 250px) { .list-container:hover { background: orange; } } </style> 这个可选 sc

  • Vue2.0设置全局样式(less/sass和css)

    为Vue设置全局样式需要几个步骤(如果是sass将less改成sass即可) 第一步:在src目录下的main.js,也就是入口文件里面添加下面代码 require('!style-loader!css-loader!less-loader!./common/less/index.less') 在Vue1.0版本中可以这样写,但是2.0版本中就不行,会报错提示解析错误 require('./common/less/index.less') 第二步:在build目录下的webpack.base.c

  • 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

  • 在Create React App中使用CSS Modules的方法示例

    前提条件 请先进行全局安装 create-react-app 插件哈,安装命令:npm install create-react-app -g 先使用 create-react-app 命令下载一个脚手架工程,安装命令: # 使用 npx $ npx create-react-app my-app # 使用 npm $ npm init npx create-react-app my-app # 使用 yarn $ yarn create react-app my-app 运行项目 $ cd m

  • 在 React Native 中使用 CSS Modules的配置方法

    目录 安装依赖和配置 使用 示例 有些前端工程师希望也能像开发 web 应用那样,使用 CSS Modules 来开发 React Native.本文将介绍如何在 React Native 中使用 CSS Modules. 安装依赖和配置 首先安装 react-native-sass-transformer 使得我们可以在 React Native 应用中使用 sass 样式. yarn add react-native-sass-transformer sass -D 参考如下配置,修改 me

  • vue中的使用token的方法示例

    初始于登录页面 Home.vue <template> <div class="home"> </div> </template> <script> // @ is an alias to /src import HelloWorld from '@/components/HelloWorld.vue' import axios from 'axios'; export default { name: 'home', comp

  • Vue中引入样式文件的方法

    一.在vue中使用scss 首先进行安装如下依赖: cnpm i sass-loader node-sass -D 二.vue中引入样式文件 1)在index.html模板html文件中引入,这种方式引入的原样编译在生成的html文件中,如果想要通过link引入外部的样式文件,建议使用这种方式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2imis&

  • 详解Vue中的scoped及穿透方法

    scoped的由来 css一直有个令人困扰的作用域问题:即使是模块化编程下,在对应的模块的js中import css进来,这个css仍然是全局的.为了避免css样式之间的污染,vue中引入了scoped这个概念. 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件.通过设置该属性,使得组件之间的样式不互相污染.如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化. 但是这

  • 在create-react-app中使用css modules的示例代码

    前言 如果我们从零开始用webpack + es6来结合react开发前端应用,那势必会在各种webpack配置中消耗大量精力,于是便有了各种脚手架,create-react-app就是其中之一. 对于css modules,在react中,通常用它来避免预料之外样式规则相互覆盖以及实现其他功能. 配置弹出配置文件 如果直接使用create-react-app搭建一个项目,所有的配置文件都被隐藏了,整个目录就先这样 所以,第一步是将所有的配置文件弹出,在根目录运行以下代码 npm run eje

  • Vue中使用webpack别名的方法实例详解

    在工作中,我们经常会写出这种代码: import MHeader from '../../components/m-header/m-header' @import "../../common/stylus/variable" @import "../../common/stylus/mixin" 即,需要引入公共文件,但是公共文件的文件路径里当前文件很远,那么就会形成上面示例中的那种路径很长的情况. 而因为文件目录是约定俗成的,不可轻易更改,无法修改相对路径.那么

  • Vue3新特性之在Composition API中使用CSS Modules

    在 Vue 3 Composition API 最近的一次 beta 升级中,无论是 Vue 3 本 3 库 vue-next,还是面向 Vue 2 过渡用的 @vue/composition-api 库中,都同步更新了一个 useCSSModule 函数 -- 用来在使用了 Composition API 的 Vue 实例中,支持 CSS Modules 语法. 首先来看看什么是 CSS Modules: CSS Modules CSS Modules 是一种 CSS 的模块化和组合系统.vu

随机推荐