uniapp scss定义全局变量

在UniApp中定义全局变量可以通过使用SCSS来实现。首先，你需要在uni.scss文件中引入一个variable.scss文件，可以使用以下代码：

// 引入公共scss变量文件
@import './static/css/variable.scss';

接下来，你需要在App.vue文件中的style标签中添加lang="scss"属性，并在第一行引入uview-ui的index.scss文件以及其他需要的公共css文件，如base.css、common.scss和iconfont.css。可以使用以下代码：

<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import "uview-ui/index.scss"; /*每个页面公共css */
@import './static/css/base.css'; /* scss公共类 */
@import './static/css/common.scss';
@import './static/fonts/iconfont.css';
</style>

接下来，你可以在common.scss文件中使用@import指令引入variable.scss文件，并定义公共的样式类。例如，你可以使用以下代码定义一个color-primary类和一个bg-primary类，其中使用了variable.scss文件中定义的$primary-color变量：

@import './variable.scss'; // 引入公共scss变量文件

// 公共类
.color-primary {
  color: $primary-color;
}

.bg-primary {
  background-color: $primary-color;
  color: #fff;
}

这样，你就成功在UniApp中定义了全局的SCSS变量和样式类。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [uniapp 添加scss全局变量、scss公共类](https://blog.csdn.net/qq_40146789/article/details/124835164)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]