项目集成 SASS（SCSS）

在 Vue3 + Vite 项目中，我们可以使用 SASS（SCSS） 作为 CSS 预处理器，以提高样式的可维护性、复用性和开发效率。

---

1. SCSS 语法的基本支持

Vite 本身已经内置支持 SCSS（SASS），因此 无需额外安装 sass 和 sass-loader。如果你的项目已经安装了 styleLint，那么 SCSS 语法已经可用。

在 Vue 组件 中，我们可以直接使用 lang="scss" 来编写 SCSS 代码：

<style scoped lang="scss">
.container {
  color: red;
  font-size: 16px;
}
</style>

📌 说明

• lang="scss"：指定样式的语言为 SCSS，否则默认是普通的 CSS。
• scoped：表示该样式仅作用于当前组件，不会影响其他组件。

---

2. 添加全局 SCSS 样式

虽然我们可以在每个组件内使用 lang="scss"，但很多样式是 全局通用的，例如：

• 重置默认样式
• 基础布局
• 字体、颜色变量
• 公共混入（mixins）

因此，我们需要在 src/styles 目录 下创建一个全局 SCSS 文件：

创建 src/styles/index.scss

@import './reset.scss'; // 引入重置默认样式
@import './variable.scss'; // 引入全局变量

创建 src/styles/reset.scss

/* 清除默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}

---

3. 在 main.ts 中引入全局样式

为了让 index.scss 在项目的 所有组件 中生效，我们需要在 main.ts 全局引入样式。

修改 main.ts

import '@/styles/index.scss'; // 引入全局 SCSS 样式

📌 说明

• @/styles/index.scss：@ 代表 src 目录，Vite 配置了别名，避免 ../../styles 这样的相对路径。

---

4. 配置全局 SCSS 变量

为什么要配置全局变量？

• 避免在每个组件的 <style> 内部 重复定义 颜色、字体等样式变量。
• 让所有组件都可以 直接使用 预定义的变量，例如 $primary-color、$font-size。
• 提高样式的 一致性 和 维护性。

创建 src/styles/variable.scss

// 颜色变量
$primary-color: #409eff;
$success-color: #67c23a;
$warning-color: #e6a23c;
$error-color: #f56c6c;

// 字体大小
$font-size-base: 14px;
$font-size-lg: 16px;
$font-size-sm: 12px;

// 边距
$padding-base: 10px;
$margin-base: 10px;

在 Vue 组件中使用变量

如果不做任何配置，在 .vue 组件中是无法直接使用 variable.scss 变量的：

<style scoped lang="scss">
.button {
  color: $primary-color; // ❌ 报错：未定义变量
}
</style>

为了解决这个问题，我们需要 修改 vite.config.ts，让 Vue 组件的 SCSS 自动引入 variable.scss。

---

5. 配置 Vite 让全局变量自动引入

我们需要在 Vite 配置文件 vite.config.ts 中，为 SCSS 添加全局变量。

修改 vite.config.ts

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        // additionalData: '@import "@/styles/variable.scss";', // 让所有 SCSS 文件自动引入变量
        // ✅ 推荐使用 `@use` 而不是 `@import`
        additionalData: `@use "@/styles/variable.scss" as *;`,
      },
    },
  },
});

📌 说明

• preprocessorOptions.scss.additionalData
  

  ：

  • 这个配置让 所有 .scss 文件 自动引入 variable.scss，这样就不需要在每个组件中手动 @import。

• @import "@/styles/variable.scss";
  

  ：

  • 注意：路径必须以 @ 开头（代表 src 目录）。
  • 末尾必须有 ;（分号），否则 Vite 解析时会报错。

---

6. 测试全局 SCSS 配置

在 Vue 组件中使用全局 SCSS 变量

<template>
  <button class="custom-btn">全局 SCSS 变量按钮</button>
</template>

<style scoped lang="scss">
.custom-btn {
  background-color: $primary-color; // 直接使用全局变量
  color: white;
  padding: $padding-base;
  font-size: $font-size-base;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>

运行项目，检查样式

运行 pnpm run dev，检查按钮是否正确显示 primary-color 颜色，并且没有 SCSS 变量报错。