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 动态路由权限控制
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>
🎭 结果
标题“环境变量”变成红色。
本文为博主原创文章,任何个人、团体、机构转载和摘录,请注明出处。