在项目中引入和使用 SCSS 文件

你想知道在项目（尤其是 Vue 项目，因为我们之前围绕 Vue3 H5 页面展开）中如何完整地引入和使用 SCSS 文件，包括环境配置、单组件内使用、全局共享 SCSS 变量/样式等核心操作，我会分步骤讲清楚，新手也能轻松上手。

一、前提：安装 SCSS 编译依赖

SCSS 是预编译语言，需要工具将其编译为浏览器能识别的 CSS，所以首先要在项目中安装编译依赖（不同构建工具的命令略有差异）。

1. Vue CLI 创建的项目（最常用）

打开终端，进入项目根目录，执行：

# Vue3 项目（推荐安装最新兼容版本）
npm install sass sass-loader --save-dev
# 或 yarn
yarn add sass sass-loader --dev

# 注意：Vue2 项目需要指定 sass-loader 版本（避免兼容问题）
npm install sass sass-loader@10.x node-sass --save-dev

2. Vite 创建的 Vue 项目

Vite 内置了对 SCSS 的支持，只需安装 sass 即可：

npm install sass --save-dev
# 或 yarn
yarn add sass --dev

二、核心使用方式（分场景）

场景 1：在 Vue 单文件组件（.vue）内直接使用 SCSS

这是最基础的用法，也是我们之前修改样式时用到的方式：

1. 在 <style> 标签上添加 lang="scss"（指定语法为 SCSS）；
2. 可选 scoped 保持样式作用域（仅当前组件生效）；
3. 直接写 SCSS 嵌套、变量等语法。

示例（和之前的代码呼应）：

<template>
  <div class="container">...</div>
</template>

<script setup>...</script>

<!-- 核心：添加 lang="scss" -->
<style scoped lang="scss">
// 定义 SCSS 变量
$primary-color: #9d60ff;
$font-size-base: 28px;

.container {
  width: 750px;
  font-size: $font-size-base;

  // 嵌套写法
  .navbar {
    background: #fff;
    .nav-title {
      color: $primary-color;
    }
  }
}
</style>

场景 2：引入单独的 SCSS 文件（抽离公共样式）

如果样式代码较多，建议抽离为单独的 .scss 文件，再引入到组件/全局中。

步骤 1：新建 SCSS 文件

在项目的 src/assets/styles/ 目录下新建 common.scss（目录可自定义）：

// src/assets/styles/common.scss
// 定义全局变量
$primary-color: #9d60ff;
$bg-color-main: #f9f6ff;
$border-radius-large: 12px;

// 定义混合器（SCSS 复用样式的技巧）
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

// 公共样式
body {
  margin: 0;
  padding: 0;
}

步骤 2：在组件内引入该 SCSS 文件

在 .vue 组件的 <style> 中通过 @use 或 @import 引入（@use 是 SCSS 新版推荐，@import 兼容更好）：

<style scoped lang="scss">
// 引入单独的 SCSS 文件（路径根据实际项目调整）
@import "@/assets/styles/common.scss";

.container {
  width: 750px;
  background: $bg-color-main; // 使用全局变量

  .mic-btn {
    @include flex-center; // 使用混合器
    background: $primary-color;
    border-radius: $border-radius-large;
  }
}
</style>

场景 3：全局引入 SCSS（无需每个组件都 @import）

如果希望 SCSS 变量/混合器在所有组件中直接使用（不用每次手动引入），可以配置「全局注入」：

方式 1：Vue CLI 项目（vue.config.js）

1. 在项目根目录新建/修改 vue.config.js：

const {
    defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
   
  css: {
   
    loaderOptions: {
   
      scss: {
   
        // 全局注入变量/混合器（多个文件用 ; 分隔）
        additionalData: `@import "@/assets/styles/common.scss";`
      }
    }
  }
})

1. 重启项目后，所有 .vue 组件的 SCSS 中可直接使用 $primary-color、@include flex-center，无需手动 import。

方式 2：Vite 项目（vite.config.js）

1. 修改 vite.config.js：

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

export default defineConfig({
   
  plugins: [vue()],
  css: {
   
    preprocessorOptions: {
   
      scss: {
   
        // 全局注入（注意：Vite 中用 additionalData 或 prependData，不同版本兼容）
        additionalData: `@import "@/assets/styles/common.scss";`
      }
    }
  },
  // 可选：配置 @ 指向 src 目录（方便路径书写）
  resolve: {
   
    alias: {
   
      '@': path.resolve(__dirname, 'src')
    }
  }
})

场景 4：在 JS/TS 中引入 SCSS（全局样式）

如果有全局 SCSS 样式（如重置样式、通用布局），可在项目入口文件（main.js/main.ts）中直接引入：

// src/main.js
import {
    createApp } from 'vue'
import App from './App.vue'
// 引入全局 SCSS 文件
import '@/assets/styles/global.scss'

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

三、常见注意事项

1. 路径问题：@ 是 Vue 项目中 src 目录的别名（需配置），如果未配置，用相对路径（如 ../assets/styles/common.scss）。
2. 版本兼容：
   • Vue2 项目避免安装过高版本的 sass-loader（推荐 10.x）；
   • Vite 无需安装 sass-loader，只需 sass。
3. scoped 样式：<style scoped lang="scss"> 中的样式仅作用于当前组件，全局样式建议去掉 scoped 或放在单独的全局 SCSS 文件中。
4. 嵌套深度：SCSS 嵌套不要过深（建议不超过 3 层），否则编译后的 CSS 选择器过复杂，影响性能。

总结

1. 环境准备：安装 sass（必装）和 sass-loader（Vue CLI 需装），注意版本兼容。
2. 基础使用：Vue 单组件内加 lang="scss" 即可写 SCSS 嵌套/变量。
3. 高效复用：抽离公共 SCSS 文件，通过 @import 局部引入，或配置全局注入实现全组件共享。
4. 全局样式：在 main.js 中引入全局 SCSS 文件，覆盖整个项目。

按这个流程操作，就能在 Vue 项目中顺畅使用 SCSS，既保留 CSS 的功能，又能利用 SCSS 的变量、嵌套、混合器等特性提升样式开发效率。