样式组织
原创2022年5月8日
样式组织
样式文件,统一放在 styles 目录下。
默认有如下几个文件
├─request
│ ├─global.scss # 全局样式
│ ├─index.scss # 样式入口
│ ├─normalize.scss # 浏览器差异抹平
│ ├─reset.scss # 样式重置
│ ├─variable.scss # scss变量文件,所有scss样式文件默认可用,无需手动导入
其中,index.scss 文件内容如下
// 默认浏览器差异抹平
// 请不要动以下两个文件
@import "./reset.scss";
@import "./normalize.scss";
// 全局样式,请不要将全局样式写到 App.vue 中!!!
@import "./global.scss";
如果要在 styles 目录下增加其他全局通用样式文件,请手动在 index.scss 文件中引入。
全局样式
很多人,由于框架没有规范,喜欢把全局样式写在 App.vue 文件的 style 模块中。
在 yicode 里,这种方式是不提倡的,建议把全局样式写在 styles 目录下的 global.scss 文件中。
或者在 styles 目录下,创建新的全局样式文件,在 styles/index.scss 文件中导入。