Skip to content
陈随易陈随易
我的博客
    • 目录含义
      • 路由管理
        • 构建打包
          • 项目部署
            • main.js入口
              • 静态资源
                • css预处理
                  • 路径别名
                    • 样式组织
                      • 全局样式
                      • 页面分配
                        • 全局组件
                          • 插件导入

                          样式组织

                          陈随易原创2022年5月8日
                          • 开源项目
                          • yicode-cli
                          小于 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 文件中导入。

                          上次编辑于: 2022/5/8 下午1:50:01
                          贡献者: chensuiyi
                          上一页
                          路径别名
                          下一页
                          页面分配
                          何以解忧,唯有代码
                          Copyright © 2022 陈随易

                          该应用可以安装在你的 PC 或移动设备上。这将使该 Web 应用程序外观和行为与其他应用程序相同。它将在出现在应用程序列表中,并可以固定到主屏幕,开始菜单或任务栏。此 Web 应用程序还将能够与其他应用程序和你的操作系统安全地进行交互。

                          详情