1. 样式文件目录介绍
本项目中的公共样式文件均位于 src/assets/css 目录下,其中 index.scss是总的样式文件的汇总入口 ,common.scss 是供全局使用的一些基本样式(常量), _theme.scss、_handle.scss 两个文件是进行主题颜色配置的文件。
如下图,将 index.scss 在 main.js 文件中引入即可全局使用。.
2. 主题 scss 文件配置
src/assets/css 目录下的 _themes.scss,里面可配置不同的主题配色方案,本文配置了两个主题颜色:light、dark。
src/assets/css 目录下的 _handle.scss 用来操作上述 _themes.scss 中 $theme 的变量,_handle.scss 文件内容:
3. 组件中使用
样式文件都配置完成了,怎么设置当前需要使用的主题呢 ?
- 此处具体情况具体分析,在合适的页面或位置写入即可,本文是写在了 App.vue 项目入口文件中,通过
方法传入当前想要使用的主题。本文默认传入的 ‘light’,则 vue 页面中使用的即为 _theme.scss 中的 light 对象下配置好的颜色或者其他属性;
- 设置其他主题色(如:dark、blue)同理,前提是 _theme.scss 文件中存在配置好的对应主题样式;
home.vue 中同理
4. 效果