uni-app uni.scss内置全局样式变量

在uni-app中，可以通过uni.scss文件定义全局样式变量，然后在项目中的其他.vue文件中使用这些变量。以下是如何定义和使用全局样式变量的步骤和示例代码：

1. 在项目根目录下创建一个uni.scss文件（如果还没有的话）。
2. 在uni.scss文件中定义全局样式变量。
3. 在.vue文件中通过<style>标签引入uni.scss，并使用变量。

示例代码

uni.scss

/* 定义全局样式变量 */
$global-color-primary: #3498db;
$global-font-size-large: 18px;
 
/* 其他全局样式 */
body {
  background-color: #f3f3f3;
}

App.vue

<template>
  <view class="container">
    <!-- 你的页面内容 -->
  </view>
</template>
 
<script>
export default {
  // ...
}
</script>
 
<style lang="scss">
/* 引入uni.scss */
@import "./uni.scss";
 
.container {
  color: $global-color-primary;
  font-size: $global-font-size-large;
}
</style>

在上述示例中，我们定义了两个全局样式变量$global-color-primary和$global-font-size-large，然后在App.vue文件中通过@import引入了uni.scss文件，并使用这些变量来设置容器的文字颜色和字体大小。这样，在整个uni-app项目中，$global-color-primary和$global-font-size-large这两个变量都可以被使用，实现了样式的全局统一。