Vue3中SCSS的使用指南

在 Vue 3 中，SCSS 是一种你可以使用的 CSS 预处理器。它本身不是 Vue 3 的一部分，但 Vue 3 的构建工具链（如 Vite 或 Vue CLI）提供了无缝集成，让你可以非常方便地在项目中使用它。

简单来说：

• SCSS： 是 Sass（Syntactically Awesome Style Sheets）的一种语法格式。它扩展了 CSS 的功能，增加了变量、嵌套规则、混合（Mixins）、函数等强大特性。其语法与常规 CSS 非常相似，易于上手。

• Vue 3： 是一个用于构建用户界面的 JavaScript 框架。它支持在单个文件组件（.vue 文件）的 <style> 标签中直接使用 SCSS（以及其他预处理器）。

为什么要在 Vue 3 中使用 SCSS？

使用原生 CSS 完全可以构建 Vue 应用，但 SCSS 提供了更高级的功能，让样式编写更高效、更易于维护：

1. 变量： 可以定义颜色、字体、尺寸等公共值，并在整个项目中复用。更改主题色只需修改一个变量。

   scss

   $primary-color: #3498db;
   $font-stack: Helvetica, sans-serif;
   
   .button {
     background-color: $primary-color;
     font-family: $font-stack;
   }

2. 嵌套： 可以嵌套 CSS 选择器，使结构更清晰，更贴近 HTML 的 DOM 结构。

   scss

   .nav {
     background-color: #f8f8f8;
   
     ul {
       margin: 0;
       padding: 0;
       list-style: none;
     }
   
     li {
       display: inline-block;
     }
   
     a {
       text-decoration: none;
       &:hover { // & 代表父选择器，这里即 `a`
         color: red;
       }
     }
   }

3. 混合（Mixins）： 可以定义可重用的代码块，甚至可以传入参数。

   scss

   @mixin box-shadow($x, $y, $blur, $color) {
     box-shadow: $x $y $blur $color;
     -webkit-box-shadow: $x $y $blur $color;
     -moz-box-shadow: $x $y $blur $color;
   }
   
   .card {
     @include box-shadow(0, 2px, 4px, rgba(0,0,0,.1));
   }

4. 部分文件与导入： 可以将样式拆分成多个小文件（通常以 _ 开头，如 _variables.scss），然后通过 @import 引入主文件，有助于代码组织。

   scss

   // 在 main.scss 中
   @import './variables';
   @import './mixins';
   @import './components/button';

5. 函数与运算： 可以进行数学运算和使用内置函数来操作颜色、数值等。

   scss

   .sidebar {
     width: 600px / 960px * 100%; // 进行数学运算
     background-color: lighten($primary-color, 20%); // 使用函数使颜色变亮 20%
   }

如何在 Vue 3 项目中使用 SCSS？

Vue 3 项目通常由 Vite 或 Vue CLI 创建，它们都内置了对 SCSS 的支持，但需要额外安装一个编译器。

1. 安装必要的依赖

你需要安装 sass 这个包（Dart Sass 是实现 Sass 的最新、推荐的首选库）。

bash

# 使用 npm
npm install sass -D

# 使用 yarn
yarn add sass -D

# 使用 pnpm
pnpm add sass -D

注意： node-sass 是旧的 LibSass 绑定，现已弃用。请务必使用 sass 包。

2. 在 Vue 单文件组件（SFC）中使用

在 .vue 文件的 <style> 标签上添加 lang="scss" 属性即可。

vue

<template>
  <button class="my-button">Click Me</button>
</template>

<script setup>
// 你的脚本逻辑
</script>

<style lang="scss">
// 现在你可以在这里编写 SCSS 代码了！
$primary-color: #3498db;

.my-button {
  background-color: $primary-color;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;

  &:hover {
    background-color: darken($primary-color, 10%);
  }
}
</style>

3. 全局注入 SCSS 变量/混合（可选但非常有用）

你通常会有一些全局的变量（如品牌色、间距）或混合，希望在所有组件中无需导入即可使用。

在 vite.config.js 中配置：

javascript

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

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        // 这里可以全局注入 SCSS 变量和混合。
        // 注意：路径末尾必须要有分号 `;`，否则会报错。
        additionalData: `
          @import "@/assets/styles/variables.scss";
          @import "@/assets/styles/mixins.scss";
        `
      }
    }
  }
})

配置后，在 variables.scss 和 mixins.scss 中定义的变量和混合就可以在所有组件的 <style lang="scss"> 中直接使用了。

4. 使用 CSS Modules 与 SCSS（可选）

你也可以将 SCSS 与 CSS Modules 结合使用，获得局部作用域样式的好处。

vue

<template>
  <button :class="$style.myButton">Click Me</button>
</template>

<script setup>
// 可以像这样在 JS 中访问编译后的类名
import { useCssModule } from 'vue'
const style = useCssModule()
console.log(style.myButton) // 输出一个哈希化的类名，如 ‘_myButton_1x2yz_1’
</script>

<style module lang="scss"> // 注意这里的 `module` 属性
$local-color: red;

.myButton {
  background-color: $local-color;
}
</style>

总结

在 Vue 3 中，SCSS 是一个功能强大的 CSS 预处理器，它通过 Vue 的构建工具（Vite/Vue CLI）被完美集成。它提供了变量、嵌套、混合等高级功能，极大地提升了 CSS 的编写效率和可维护性。通过简单的安装和配置，你就可以在 .vue 文件中享受 SCSS 带来的所有便利。