uniapp修改全局样式,定义全局变量_uniapp style模块里使用变量

uniapp修改全局样式

需求：Vue 的 UniApp项目中使用SCSS定义全局的样式变量

例子1

1.在项目的 src 目录下创建一个名为 _variables.scss 的文件
2.在 _variables.scss 文件中定义你的背景颜色变量，例如：

$global-bg-color: #f5f5f5;
1

这里将 $global-bg-color 设置为 #f5f5f5，但你可以根据自己的需求设置任何颜色值。
3.在需要使用背景颜色的组件中，引入 _variables.scss 文件，并使用定义的变量。例如，在你的组件样式中：

@import '@/path/to/_variables.scss';

.container {
  background-color: $global-bg-color;
}
1
2
3
4
5

这里使用 @import 引入了 _variables.scss 文件，并在 .container 类选择器中使用了 $global-bg-color 变量来设置背景颜色。

现在，当你想要修改全局背景颜色时，只需更新 _variables.scss 文件中的变量值即可，这样会自动应用到所有使用该变量的地方，实现方便的全局样式修改。
提示：请确保已经配置好 UniApp 项目以支持 SCSS，通常需要安装 node-sass 和 sass-loader 等相关依赖。

当例子1，改动的页面有点多时, 如果想省略这个代码 @import ‘@/path/to/_variables.scss’; 你可以采用第二种方案（例子二）和第三种方案（例子三）

例子2

1.在项目的 src 目录下创建一个名为 global.scss 的文件（或根据需要命名）。
2.在 global.scss 文件中定义全局背景颜色变量，例如:

:root {
  --global-bg-color: #f5f5f5;
}
1
2
3

这里将 --global-bg-color 设置为 #f5f5f5，但你可以根据自己的需求设置任何颜色值。
3.在你的 app.Vue 根组件或主要布局组件中，添加以下代码：

<style lang="scss">
@import '@/path/to/global.scss';

/* 其他样式 */
</style>
1
2
3
4
5

这样，global.scss 中定义的全局背景颜色变量将在整个应用程序中生效。
4.在需要使用背景颜色的组件中，直接使用 CSS 变量来设置背景颜色。例如，在你的组件样式中：

.container {
  background-color: var(--global-bg-color);
}
1
2
3

使用 var(–global-bg-color) 来引用全局背景颜色变量，并将其应用于 .container 类选择器中的背景颜色。

通过使用 CSS 变量，你可以在不引入 _variables.scss 文件的情况下，直接使用全局背景颜色变量，并实现全局样式修改的便利性。

提示：以下 例子3 是我使用的方案

例子3

先看下我的项目目录，这里app.vue同层级目录下的uni.scss文件默认被视为全局样式文件，会自动应用于整个项目


当你在uni.scss文件中定义了$mainColor: #FFA140;变量时，它会被编译成CSS并应用于整个项目。由于uni.scss是一个通用的全局样式文件，其定义的变量和样式规则会被自动引入到每个页面和组件中。

因此，在其他组件的样式中，你可以直接使用$mainColor作为背景颜色或任何需要的地方，无需额外引入uni.scss文件或进行变量定义。

这种全局样式的工作方式是UniApp框架的一部分，旨在提供一种便捷的方式来定义和共享全局样式和变量。通过这种机制，你可以在整个项目中重用和维护相同的样式规则和变量值，实现一致的外观和主题。

总结

以上就是用全局变量去维护uniapp项目样式的方案