样式组织

2021-11-23 小于 1 分钟

# 样式组织

样式文件,统一放在 styles 目录下。

默认有如下几个文件

├─request
│  ├─global.scss # 全局样式
│  ├─index.scss # 样式入口
│  ├─normalize.scss # 浏览器差异抹平
│  ├─reset.scss # 样式重置
│  ├─variable.scss # scss变量文件,所有scss样式文件默认可用,无需手动导入
1
2
3
4
5
6

其中,index.scss 文件内容如下

// 默认浏览器差异抹平
// 请不要动以下两个文件
@import "./reset.scss";
@import "./normalize.scss";

// 全局样式,请不要将全局样式写到 App.vue 中!!!
@import "./global.scss";
1
2
3
4
5
6
7

如果要在 styles 目录下增加其他全局通用样式文件,请手动在 index.scss 文件中引入。

# 全局样式

很多人,由于框架没有规范,喜欢把全局样式写在 App.vue 文件的 style 模块中。

在 yicode 里,这种方式是不提倡的,建议把全局样式写在 styles 目录下的 global.scss 文件中。

或者在 styles 目录下,创建新的全局样式文件,在 styles/index.scss 文件中导入。

上次编辑于: 2021年11月23日 13:44
贡献者: chensuiyi