快捷導(dǎo)航

如何在Vue 3項(xiàng)目中配置和使用SCSS

更新時(shí)間：2025年11月15日 14:24:26 作者：前端小趴菜-進(jìn)階

本文詳細(xì)介紹了在Vue3項(xiàng)目中配置和使用SCSS的步驟,包括安裝依賴、配置vue.config.js、在組件中使用SCSS、全局樣式管理、SCSS模塊化以及深度選擇器的使用,同時(shí),還提供了解決常見問題和優(yōu)化建議

?? 配置SCSS

首先，你需要在Vue 3項(xiàng)目中安裝必要的依賴并進(jìn)行配置。

安裝依賴
在項(xiàng)目根目錄下，通過npm或yarn安裝SCSS編譯器及對(duì)應(yīng)的Webpack加載器：

npm install sass sass-loader --save-dev

或者使用yarn：

yarn add sass sass-loader --dev

這里推薦使用sass包（Dart Sass），它是Sass的主要實(shí)現(xiàn)，更新和支持更好。

配置vue.config.js
對(duì)于Vue CLI創(chuàng)建的項(xiàng)目，通常在項(xiàng)目根目錄下創(chuàng)建或修改vue.config.js文件，來配置全局注入SCSS變量或混入（mixins）。

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";` // 全局變量文件
      }
    }
  }
})

通過loaderOptions.scss.additionalData配置，可以全局引入指定的SCSS文件，使其變量和混入在所有Vue組件中可用。請(qǐng)確保路徑正確，@/通常指向src目錄。

?? 在組件中使用SCSS

安裝并配置好SCSS后，就可以在Vue組件中使用了。

基本使用
在Vue單文件組件的<style>標(biāo)簽中，通過lang="scss"屬性即可使用SCSS。

<template>
  <div class="example">
    <h1>Hello SCSS in Vue 3!</h1>
  </div>
</template>
<script setup>
// 你的腳本邏輯
</script>
<style lang="scss" scoped>
.example {
  h1 {
    color: blue;
    font-size: 2em;
    &:hover {
      color: darkblue;
    }
  }
}
</style>

上面的例子展示了SCSS的嵌套和父選擇器（&）用法。

?? 全局樣式與變量管理

為了高效管理項(xiàng)目樣式，通常會(huì)定義一些全局的SCSS文件。

定義全局文件
建議在src/styles/目錄下創(chuàng)建一些通用的SCSS文件，例如：

_variables.scss: 用于定義全局變量（如顏色、字體等）。

// _variables.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-stack: Helvetica, sans-serif;

_mixins.scss: 用于定義混入（mixins）。

// _mixins.scss
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

index.scss: 主文件，用于引入其他SCSS局部文件。

// index.scss
@import 'variables';
@import 'mixins';

全局引入
在main.js中直接引入主SCSS文件，使其全局生效：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import '@/styles/index.scss' // 引入全局樣式
createApp(App).mount('#app')

或者在vue.config.js的additionalData中引入（如前文所述），這種方式更適合全局變量和混入。

?? 使用SCSS模塊化

Vue與SCSS結(jié)合支持CSS Modules，用于解決樣式?jīng)_突問題。

在Vue組件的<style>標(biāo)簽上添加module屬性，即可啟用CSS Modules功能。模板中通過$style對(duì)象訪問。

<template>
  <div :class="$style.example">
    <h1>Scoped SCSS Module</h1>
  </div>
</template>
<style lang="scss" module>
.example {
  background-color: $primary-color; /* 使用全局變量 */
  h1 {
    color: red;
  }
}
</style>

?? 深度選擇器

在Vue中，當(dāng)<style>標(biāo)簽帶有scoped屬性時(shí)，若要修改子組件樣式，需要使用深度選擇器。

在Vue 2及Vue 3中，推薦使用 ::v-deep ：

<style lang="scss" scoped>
.container {
  ::v-deep .child-component {
    color: red;
  }
}
</style>

::v-deep 也可用作組合符 ::v-deep(.child-component) 。
舊有的 /deep/ 選擇器在Vue 2.x中可用，但在Vue 3中不推薦使用。

?? 常見問題與技巧

版本兼容性：若遇到 Module build failed: TypeError: this.getResolve is not a function 錯(cuò)誤，可能是sass-loader版本過高，可嘗試降低版本，例如安裝npm install sass-loader@7.3.1 --save 。
路徑別名：在SCSS文件中使用@import時(shí)，@別名可能不直接生效。此時(shí)可在additionalData中使用相對(duì)路徑或絕對(duì)路徑，或者通過Webpack配置解決。
優(yōu)化建議：
- 遵循BEM等命名規(guī)范，提高代碼可讀性。
- 將樣式按功能拆分為多個(gè)小文件（如_button.scss、_form.scss），通過index.scss統(tǒng)一引入，便于維護(hù)。