在Vue3项目中集成SCSS的完整流程与高级用法

# 使用 npm
npm install sass sass-loader -D
# 使用 yarn
yarn add sass sass-loader -D
# 使用 pnpm
pnpm add sass sass-loader -D

<template>
  <div class="container">
    <h1 class="title">{{ title }}</h1>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const title = ref('Hello SCSS in Vue3')
</script>
<style lang="scss" scoped>
// 定义 SCSS 变量（编译后不再存在，仅在开发时使用）
$primary-color: #42b883;
$font-size: 16px;
.container {
  padding: 20px;
  .title {
    color: $primary-color;
    font-size: $font-size * 1.5;
    // &: 引用父选择器，相当于 .container .title:hover
    &:hover {
      text-decoration: underline;
    }
  }
}
</style>

import { createApp } from 'vue'
import App from './App.vue'
import './styles/global.scss' // 引入全局样式，所有组件均可访问

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

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

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        // 自动在每个 SCSS 文件开头注入变量文件
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  }
})

// 颜色变量
$primary-color: #42b883;
$secondary-color: #35495e;
$danger-color: #ff4757;
// 尺寸变量
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;
// 响应式断点
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;

@mixin flex-center($direction: row) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: $direction;
}
@mixin responsive($breakpoint) {
  @media (max-width: $breakpoint) {
    @content;
  }
}

// 先引入 mixins
@import "@/styles/mixins";

.container {
  @include flex-center(column);

  @include responsive($breakpoint-md) {
    padding: $spacing-sm;
  }
}

<template>
  <div :class="$style.container">
    <h1 :class="$style.title">模块化样式</h1>
  </div>
</template>
<style module lang="scss">
.container {
  padding: 20px;
  .title {
    color: $primary-color;
  }
}
</style>

::v-deep(.child-component) {
  color: red;
}
// 新版语法（推荐）
:deep(.child-component) {
  color: red;
}

src/
├── styles/
│   ├── variables.scss    # 全局变量
│   ├── mixins.scss       # 混合器
│   ├── reset.scss        # 重置样式
│   ├── global.scss       # 全局样式
│   └── components/       # 组件样式（如按钮、弹窗等）
│       ├── button.scss
│       └── modal.scss
└── components/
    └── MyComponent.vue