了解 UniApp 全局样式的存放和导入位置，能让你的项目样式管理更清晰、维护更轻松。下面这个表格汇总了核心的配置文件和方式，方便你快速把握全局。
| 配置方式 | 主要作用 | 关键配置/说明 |
|---|---|---|
| App.vue 文件 | 定义全局CSS样式规则（如字体、颜色类） | 在 <style>标签内编写或通过 @import导入外部CSS文件 |
| uni.scss 文件 | 定义全局SCSS变量（如主题色、间距） | 定义SCSS变量，在整个项目的任何样式文件中可直接使用 |
| pages.json | 配置应用级别的页面样式（如导航栏、背景色） | 配置 globalStyle节点，影响所有页面的窗口表现 |
详细配置指南
1. 使用 App.vue定义全局样式
App.vue是定义全局CSS样式的主要位置，适合放置所有页面都可能用到的基础样式规则 。
- 直接编写样式：在
App.vue的<style>标签内直接编写全局样式。<!-- App.vue --> <style> /* 定义全局的字体和颜色 */ .global-text { font-family: 'Helvetica Neue', Helvetica, sans-serif; color: #333333; } .page-bg { background-color: #f8f8f8; } </style>这样，在任意页面中都可以直接使用global-text和page-bg这些类名 。 - 导入外部样式文件：如果全局样式较多，建议在项目根目录创建如
common目录存放样式文件，然后在App.vue中导入 。<!-- App.vue --> <style> /* 导入官方CSS库、图标库、动画库等 */ @import url('./common/uni.css'); @import url('./common/icon.css'); @import url('./common/animate.css'); </style>
2. 使用 uni.scss定义全局变量
uni.scss主要用于定义 SCSS 变量和混入（mixins），方便在整个项目中统一维护主题色、字体大小等 。
- 定义变量：在项目根目录的
uni.scss文件中定义你的变量。// uni.scss /* 主题色 */ $primary-color: #007AFF; /* 辅助色 */ $success-color: #4CD964; /* 文字色 */ $text-color: #333333; /* 边框色 */ $border-color: #E5E5E5; - 使用变量：定义后，在项目任意
.vue文件的<style>标签中（需设置lang="scss"）可直接使用这些变量，无需再次导入 。<!-- 任意页面.vue --> <style lang="scss"> .custom-component { color: $primary-color; border: 1px solid $border-color; } </style>
3. 配置 pages.json的全局窗口样式
pages.json中的 globalStyle节点用于设置应用的状态栏、导航条、标题、窗口背景色等影响所有页面的样式 。
// pages.json
{
"pages": [
// ... 你的页面路径配置
],
"globalStyle": {
"navigationBarTextStyle": "white", // 导航栏标题颜色
"navigationBarTitleText": "我的应用", // 导航栏标题文字
"navigationBarBackgroundColor": "#007AFF", // 导航栏背景色
"backgroundColor": "#F8F8F8", // 窗口背景色
"enablePullDownRefresh": false, // 是否开启下拉刷新
"onReachBottomDistance": 50 // 页面上拉触底距离
}
}每个页面的 .vue文件内部的 style标签内定义的样式，以及页面 style配置中相同的属性，会覆盖 globalStyle中的设置 。
最佳实践与建议
- 样式优先级：
pages.json中页面级的style配置 >App.vue中的全局样式 >pages.json中的globalStyle配置。了解这点对调试样式覆盖问题很有帮助 。 - 组织样式文件：对于大型项目，建议将不同类型的全局样式（如变量、混合、工具类）分别放到不同的 SCSS 文件中，然后在
App.vue或uni.scss中统一导入，使结构更清晰。 - 利用 SCSS 功能：除了变量，还可以在
uni.scss中定义@mixin（混合）和%placeholder（占位符），进一步提升样式的复用性和可维护性 。