04-Vue3使用SCSS

Vite2+Vue3+TypeScript+Element-plus脚手架搭建系列

✅01-初始化 Vite 项目
✅02-配置 Vite2 环境变量
✅03-Vite2 配置及说明
✅04-Vue3 使用 SCSS
✅05-Vue3 路由配置
✅06-TypeScript 配置及说明
✅07-Vue3 使用 axios
✅08-Vue3 axios 对象封装
✅09-ESLint 配置及说明
✅10-ESLint 与 Prettier 集成配置及说明
✅11-Mock.js 模拟接口数据
✅12-Vite2 引入 Element-Plus 框架
✅13-渐变+透明样式实现清爽登录页
✅14-Element-Plus 实现后台管理系统布局
✅15-Pinia 实现 store 状态管理
✅16-Vue3 动态路由权限控制

---

源码地址：GitHub / 码云

---

Vue3使用SCSS

🎯 目标

以变量形式编写样式。

🍸 准备

安装依赖

npm install -D sass

调整文件&目录

在 src 目录下创建 styles 文件夹，用来存放样式文件。

styles文件目录结构如下：

📁 src

----📁 styles

--------📁 common

------------📄 font.scss

--------📁 variable

------------📄 color.scss

--------📄 index.scss

• common — 存放常用样式文件
• variable — 存放变量

🌈 Coding

定义 scss 变量

在 color.scss 定义一个颜色变量：

$color-red: #FF2F64;

编写样式

在 font.scss 编写个字体为红色的样式：

.red {
  color: $color-red
}

聚合样式文件

在 index.scss 聚合 styles 下的样式：

@import './variable/color.scss';
@import './common/font.scss';

使用样式

在 HelloWorld.vue 中导入样式文件，给 <h2> 标签添加 red 样式：

......
<h2 class="red">环境变量</h2>
......
<script lang="ts">
import '@/styles/index.scss'
......
</script>

🎭 结果

标题“环境变量”变成红色。

---

本文为博主原创文章，任何个人、团体、机构转载和摘录，请注明出处。