当前位置：首页 > news >正文

vue3：uniapp全局颜色变量配置思路：使用js变量

news 2025/10/25 8:14:11

最开始的思路是创建scss文件，使用$定义变量，像这样：

$primary-color: #ff5500;
$secondary-color: #52c41a;

然后在uni.scc文件里全局引入

@import "@/styles/variables.scss";

在vue文件里使用

<style lang="scss" scoped>.title {font-size: 36rpx;color:$primary-color;}
</style>

至此一切顺利，但是！后来我想改变确定对话框里确定按钮的颜色，取primary-color的值。

<script setup>const click = ()=> {uni.showModal({title:'请查看确认按钮为的颜色',confirmColor:'#ff5500'})}
</script>

查阅了很多博客和资料，大多数都是说要创建一个variables.module.scss文件，文件内容如下：

$primary-color: #ff5500;
$secondary-color: #52c41a;:export {primaryColor: $primary-color;secondaryColor: $secondary-color;
}

然后在vite.config.js（uniapp需要手动创建vite.config.js文件）里配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],css: {preprocessorOptions: {scss: {javascriptEnabled: true,// 全局注入 SCSS 变量文件additionalData: `@import "./styles/variables.module.scss";`}}}
})

然后在vue文件的style里用$方法获取变量值。

<style lang="scss" scoped>.title {font-size: 36rpx;color:$primary-color;}
</style>

如果要在script里使用，就引入import variables from '../../styles/variables.module.scss'

import variables from '../../styles/variables.module.scss'
const color = variables.primaryColor

但是，这样一顿操作后，开始报重复引入的错误，这也不奇怪，毕竟已经在vite.config.js里引入了，然后又在vue页面里引入了一遍。各种尝试后，我决定放弃这个方案。

放弃全局引入，直接在需要变量的vue文件里引入：

<template><view><text class="title">{{title}}</text><view>{{color}}</view><button @click="click">查看颜色</button></view>
</template><script setup>import { ref } from 'vue'import variables from '../../styles/variables.module.scss'const title = ref('hello uniapp vue3')const color = variables.primaryColorconst click = ()=> {uni.showModal({title:'请查看确认按钮为的颜色',confirmColor:color})}
</script><style lang="scss" scoped>.title {font-size: 36rpx;color: v-bind(color);}
</style>

非常完美，是我想要的效果，这个变量值在template、script和style里都能使用。

进一步，我又开始琢磨全局引入的事情，deepseek告诉我，要现在main.js里引入，并且还要配合provide/inject。

import App from './App'
import variables from './styles/variables.module.scss'
import { createSSRApp } from 'vue'export function createApp() {const app = createSSRApp(App)// 使用provide提供全局变量app.provide('$variables', variables)return {app}
}

vue文件里使用

<script setup>import { ref, inject } from 'vue'const variables = inject('$variables')const title = ref('hello uniapp vue3')const color = variables.primaryColorconst click = ()=> {uni.showModal({title:'请查看确认按钮为的颜色',confirmColor:color})}
</script>

局部引入只需要一句话，而全局引入完全没让步骤变少！所有果断放弃全局引入。

我思考了还有没有进一步优化空间：

variables.module.scss的本质还是将其转换成js变量，供vue文件使用，并且维护变量的时候，scss变量必须手动去export，容易遗漏。

既然最终是要使用js变量，何不直接在js文件里定义变量？

创建variables.js文件：

const variables = {primaryColor:'#ff5500',secondaryColor:'#52c41a'
}
export default variables

这样写，变量就方便维护了。

还是在vue文件里局部引入：

<template><view><text class="title">{{title}}</text><view>{{color}}</view><button @click="click">查看颜色</button></view>
</template><script setup>import { ref } from 'vue'import variables from '../../utils/variables'const title = ref('hello uniapp vue3')const color = variables.primaryColorconst click = ()=> {uni.showModal({title:'请查看确认按钮为的颜色',confirmColor:color})}
</script><style lang="scss" scoped>.title {font-size: 36rpx;color: v-bind(color);}
</style>

最后的运行效果：