组件样式基础

全局引入样式

在非css中引入

在vue文件或者main.js中引入的样式文件，将被vite处理，在全局生效：

// main.js

import { createApp } from 'vue'
// 引入的样式文件全局生效
import './style.css'
import './assets/global.scss'

import App from './App.vue'

createApp(App).mount('#app')

css语法的@import引入

css部分支持import语法：

<style scoped>
  @import '../../assets/iconfont/iconfont.css';
</style>

<!-- 或者 -->
<style scoped>
 @import '@/styles/scroll-bar.scss';
</style>

使用@import引入样式文件，就算加scoped，其它没有引入的模块还是可以访问到你的样式，它是全局的。

如果想要局部引入，使用这种方式让css文件仅仅在一个组件内生效：

<style src="@/style/reset.css"  scoped></style>

<style scoped>
  /* 自己的css样式 */
</style>

<style src="./mystyle.scss"  lang="scss" scoped>

局部样式基础

两种方式隔离组件样式

scoped可以让各个组件之间的css样式隔离开来，其底层原理是为每个组件标签加上一个属性，然后为每个css都加上属性选择器。使用scoped后，虽然父组件的样式将不会渗透到子组件，但是子组件的根节点仍然收到父组件定义的样式影响，也就是说，子组件的根元素被添加的属性id和父组件中被添加的属性id，是一模一样的。这是一个特性。

如果不用scoped，也可以为单文件组件的根元素指定一个类名，然后在样式部分使用类名选择器包起来：

<templete>
  <div class='root'>
        ...
    </div>
</templete>

<style>
    .root {
        
    }
</style>

组件的样式关键字

对vue组件标签可以加style和class标签，它们都会被自动的解析到组件的根元素上（所有的属性名都有这种行为）。如果存在多个根元素，则这些属性将被忽略。但是仍然可以通过$attrs的全局关键字获取到属性，并且显式的选择性添加。

对于绝大多数 attribute 来说，从外部提供给组件的值会替换掉组件内部设置好的值。但class 和 style attribute 会稍微智能一些，两边的值会被合并起来，从而得到最终的值。

:class的使用

Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强。

• 绑定对象：

绑定对象中的属性的键是待渲染的一个类名，值是在data()中定义的一个响应式的bool类型的变量。

所以简单来说，绑定的是一个属性的值全为bool类型的对象。 active 类名是否存在，取决于bool属性 isActive 的真假值：

<div :class="{ active: isActive }"></div>

:class 指令可以和一般的 class 属性共存，但:class和class都有且只有一个。特别的，当我们在某个vue组件标签上使用class的时候，它会被自动添加到组件的根元素上，这个时候如果根元素自身已经有一个class了，那么将在这个class里的最后面追加类名。

• 绑定数组

也可以绑定一个数组，它中的属性,可以是在data()中定义的响应式数据的键，键对应的值被解析为最后的类名；也可以是一个属性的键对应的值全为bool类型的对象，和上面的绑定对象一样。

• 绑定计算属性

绑定在computed中定义的计算属性也是同理可以的，该计算属性可以返回一个对象/数组。

:style的使用

:style比:class使用频率低的多。