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

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

css 复制代码

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

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

css 复制代码

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

在vue文件里使用

css 复制代码

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

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

javascript 复制代码

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

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

css 复制代码

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

:export {
  primaryColor: $primary-color;
  secondaryColor: $secondary-color;
}

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

css 复制代码

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里用$方法获取变量值。

css 复制代码

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

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

javascript 复制代码

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

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

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

javascript 复制代码

<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.primaryColor
	const 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。

javascript 复制代码

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文件里使用

javascript 复制代码

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

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

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

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

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

创建variables.js文件：

javascript 复制代码

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

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

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

javascript 复制代码

<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.primaryColor
	const click = ()=> {
		uni.showModal({
			title:'请查看确认按钮为的颜色',
			confirmColor:color
		})
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 36rpx;
		color: v-bind(color);
	}
</style>

最后的运行效果：

color: v-bind(variables.primaryColor);这样写会报错，把variables.primaryColor存在color变量里，const color = variables.primaryColor 然后color: v-bind(color);

最后的总结：

在js里使用css变量很难，但是在css里使用js变量就容易多了。