Vue 中样式的几种常见做法

1. 直接在组件中使用 `<style>`

在 Vue 单文件组件（SFC）中，最直接的方式是使用 <style> 标签编写样式。

优点: 简单直接，易于上手。
缺点: 全局污染。所有组件的样式都处于全局作用域，当项目变大、组件增多时，极易发生样式类名冲突。

vue

<template>
  <div class="star-rate">
    </div>
</template>

<style>
.star-rate {
  color: orange;
}
</style>

注意: 无论采用何种命名规范，都无法从根本上保证不产生冲突，因此不推荐在大型项目中使用此方法。

2. 使用 `scoped` 实现样式隔离

为了解决全局污染问题，Vue 提供了 scoped 属性。

原理:
1. Vue 的构建工具（如 Vite 或 Vue CLI）会为当前组件的所有 DOM 元素添加一个唯一的自定义属性，例如 data-v-xxxxxxxx。
2. 同时，它会重写 <style scoped> 中的每一个 CSS 选择器，为其附加一个对应的属性选择器。
3. 这样，样式规则就只会精确地应用到当前组件内的元素，从而实现了样式的作用域隔离。

使用方法:

vue

<style scoped>
  .star-rate {
    color: orange;
  }
</style>

编译后效果:

组件模板编译后:

html

<div class="star-rate" data-v-7a7a37b1>
  <i data-v-7a7a37b1></i>
</div>

CSS 规则编译后:

css

.star-rate[data-v-7a7a37b1] {
  color: orange;
}

3. 集成 CSS 预处理器 (Less/Sass/Stylus)

Vue 工程对 CSS 预处理器有良好的支持，可以轻松集成 Sass、Less 等。

步骤:
1. 安装依赖: 需要安装预处理器本身的核心库以及其对应的 Webpack loader。以 Sass 为例：
  bash
```
npm install sass sass-loader --save-dev
```
2. 标记语言: 在 <style> 标签上使用 lang 属性来指定所用的预处理器。

使用方法 (Sass 示例):

vue

<template>
  <div class="star-rate">
    <i>ICON</i>
  </div>
</template>

<style lang="scss" scoped>
.star-rate {
  color: orange;
  i {
    font-style: normal;
  }
}
</style>

关于嵌套: 使用预处理器的一个主要好处是嵌套语法，它能帮助组织 CSS 结构并减少类名重复。但如果已经使用了 scoped 属性，由于样式已经被隔离，类名冲突的风险大大降低，因此嵌套的必要性会减弱。可以根据团队规范和个人喜好决定是否使用。

4. 引入外部样式文件

当组件样式非常复杂时，为了避免单文件组件（.vue）过于臃肿，可以将样式抽离到独立的 CSS 文件中。

步骤:
1. 创建独立的样式文件（如 StarRate.scss）。
2. 在组件的 <style> 标签中使用 src 属性引入该文件。

使用方法:

StarRate.scss 文件:

scss

.star-rate {
  color: orange;
  i {
    font-style: normal;
  }
}

StarRate.vue 组件:

vue

<template>
  </template>

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

重要提示: 仅仅通过 src 引入外部样式文件，其效果等同于直接在 <style> 标签里写内容。它同样存在全局污染的风险。因此，必须同时添加 scoped 属性来确保样式的隔离性。

总结与进阶

方法	优点	缺点	关键语法
直接使用 `<style>`	简单	全局污染，类名易冲突	`<style>`
`scoped` 样式	样式隔离，无冲突	-	`<style scoped>`
CSS 预处理器	支持嵌套、变量等高级功能	需额外安装依赖	`<style lang="scss">`
引入外部文件	保持组件文件整洁	-	`<style src="./style.css">`

进阶知识: 以上是 Vue 中最常见的样式处理方案。对于更复杂的需求，例如使用 PostCSS 进行样式转换，或采用 CSS-in-JS 方案，则需要更深入的工程化知识，去手动配置构建工具（如 Webpack、Vite）。由于 Vue 的工程化体系是基于这些工具构建的，因此理论上可以实现任何你想要的样式方案。

Vue 中样式的几种常见做法 ​

1. 直接在组件中使用 <style> ​

2. 使用 scoped 实现样式隔离 ​

3. 集成 CSS 预处理器 (Less/Sass/Stylus) ​