在Vue项目中使用Sass的完整指南

本文详细介绍了在Vue项目中集成Sass的完整方案。

---

主要内容包括：

1. 安装sass和sass-loader依赖的步骤；
2. 在.vue文件中使用Sass语法的基本方法；
3. 针对Vue CLI和Vite项目的不同配置方式；
4. 全局变量和混入的配置技巧；
5. 项目结构建议和常见问题解决方案。

---

特别强调了Vue3+Vite项目中使用Sass的便捷性，以及如何通过构建工具配置实现全局样式共享。

---

文章还提供了深度选择器、响应式设计等实用示例，为开发者提供了在Vue生态中高效使用Sass的完整指南。

在.vue文件中使用Sass的完整指南

详细说明

1.在Vue项目中使用Sass

安装必要依赖

# Vue CLI 3/4/5 项目 npm install -D sass sass-loader@^10 # 或使用yarn yarn add -D sass sass-loader@^10 # Vue 3 + Vite项目（推荐） npm install -D sass # 无需安装sass-loader，Vite内置支持

Vue文件中的基本使用

vue

<template> <div class="container"> <button class="btn btn-primary">点击我</button> </div> </template> <script> export default { name: 'MyComponent' } </script> <style lang="scss"> // 使用Sass语法 $primary-color: #3498db; $padding: 16px; .container { padding: $padding; .btn { padding: 12px 24px; border-radius: 4px; &-primary { background-color: $primary-color; color: white; &:hover { background-color: darken($primary-color, 10%); } } } } </style>

2.不同构建工具的配置

Vue CLI项目配置

vue.config.js- 配置全局Sass变量/混入：

// vue.config.js module.exports = { css: { loaderOptions: { sass: { // 全局引入变量和混入文件 // 注意：sass-loader版本不同语法可能不同 additionalData: ` @import "@/styles/variables.scss"; @import "@/styles/mixins.scss"; ` }, scss: { additionalData: ` @import "@/styles/variables.scss"; @import "@/styles/mixins.scss"; ` } } } };

Vite项目配置

vite.config.js：

// vite.config.js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], css: { preprocessorOptions: { scss: { additionalData: ` @import "@/styles/variables.scss"; @import "@/styles/mixins.scss"; ` }, sass: { // sass语法配置（缩进语法） additionalData: ` @import "@/styles/variables" @import "@/styles/mixins" ` } } } })

3.项目结构示例

src/ ├── components/ │ └── MyComponent.vue ├── styles/ │ ├── variables.scss # 全局变量 │ ├── mixins.scss # 全局混入 │ └── functions.scss # 全局函数 └── App.vue

variables.scss（全局变量文件）：

// 设计系统变量 $primary-color: #3498db; $secondary-color: #2ecc71; $danger-color: #e74c3c; // 间距系统 $spacing-unit: 8px; $spacing-xs: $spacing-unit * 0.5; // 4px $spacing-sm: $spacing-unit; // 8px $spacing-md: $spacing-unit * 2; // 16px $spacing-lg: $spacing-unit * 3; // 24px // 响应式断点 $breakpoint-sm: 576px; $breakpoint-md: 768px; $breakpoint-lg: 992px;

mixins.scss（全局混入文件）：

// 响应式混入 @mixin respond-to($breakpoint) { @if $breakpoint == 'sm' { @media (min-width: 576px) { @content; } } @else if $breakpoint == 'md' { @media (min-width: 768px) { @content; } } @else if $breakpoint == 'lg' { @media (min-width: 992px) { @content; } } } // Flexbox布局混入 @mixin flex-center { display: flex; justify-content: center; align-items: center; } // 文本溢出省略号 @mixin text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

4.Vue组件中使用全局变量/混入

vue

<template> <div class="card"> <h3 class="title">{{ title }}</h3> <p class="description">{{ description }}</p> <button class="btn" @click="handleClick">操作</button> </div> </template> <script> export default { props: { title: String, description: String }, methods: { handleClick() { this.$emit('click'); } } } </script> <style lang="scss" scoped> // 可以直接使用全局变量和混入 .card { padding: $spacing-md; border: 1px solid #eee; border-radius: 4px; .title { color: $primary-color; margin-bottom: $spacing-sm; @include text-ellipsis; } .description { color: #666; margin-bottom: $spacing-md; } .btn { @include flex-center; padding: $spacing-sm $spacing-md; background: $secondary-color; color: white; border: none; border-radius: 4px; &:hover { background: darken($secondary-color, 10%); } } // 响应式设计 @include respond-to('md') { padding: $spacing-lg; } } </style>

5.常见问题与解决方案

6.深度选择器示例

vue

<style lang="scss" scoped> .parent { padding: 20px; // Vue 2语法 ::v-deep .child { color: red; } // Vue 3语法（推荐） :deep(.child) { color: $primary-color; } // 带插槽的样式 :slotted(.header) { font-size: 18px; } } </style>

总结

1. Vue CLI项目：需要安装sass和sass-loader@^10

2. Vite项目：只需安装sass，无需sass-loader

3. 全局配置：通过构建工具配置文件引入全局变量/混入

4. 语法选择：lang="scss"（推荐）或lang="sass"（缩进语法）

5. 最佳实践：保持样式模块化，合理使用作用域，避免过度嵌套

在Vue 3 + Vite的项目中，使用Sass最为简单方便，几乎无需额外配置即可享受Sass的强大功能。