uniapp中如何使用less定义公共颜色变量

在uniapp项目中，我想使用less来定义一些公共的颜色变量，方便全局统一管理样式。请问具体应该如何操作？需要在哪个文件中定义这些变量？又该如何在页面的样式文件中引用这些变量？

2 回复

在uniapp中使用less定义公共颜色变量：

  1. 创建variables.less文件
  2. 定义变量：@primary-color: #007AFF;
  3. 在页面less文件中引入：@import ‘variables.less’;
  4. 使用变量：color: @primary-color;

这样就能统一管理主题色了。


在 UniApp 中使用 Less 定义公共颜色变量，可以方便地统一管理主题色，提高代码复用性。以下是详细步骤：

1. 安装 Less 依赖

在项目根目录下运行命令安装 Less 和 Less-loader：

npm install less less-loader --save-dev

2. 创建全局 Less 变量文件

在项目根目录创建 common 文件夹（或其他自定义目录），新建 variables.less 文件，定义颜色变量：

// common/variables.less
@primary-color: #007AFF;    // 主色调
@success-color: #4CD964;    // 成功色
@warning-color: #FF9500;    // 警告色
@error-color: #FF3B30;      // 错误色
@text-color: #333;          // 文字主色
@bg-color: #F8F8F8;         // 背景色

3. 全局引入 Less 变量文件

在 App.vue 的 <style> 标签中全局引入：

<style lang="less">
@import './common/variables.less';
/* 其他全局样式 */
</style>

4. 在页面/组件中使用变量

在任意 Vue 文件的 <style> 中直接使用定义好的变量：

<template>
  <view class="container">
    <text class="title">标题</text>
  </view>
</template>

<style lang="less" scoped>
.container {
  background-color: @bg-color;
  padding: 20rpx;
}
.title {
  color: @primary-color;
  font-size: 36rpx;
}
</style>

5. 在 JS 中使用颜色变量（可选）

如需在 JS 中获取颜色值，可通过 CSS 变量桥接：

// variables.less 中增加 CSS 变量映射
:root {
  --primary-color: @primary-color;
  --success-color: @success-color;
}

在 JS 中获取：

const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color');

注意事项：

  • 确保 lang="less" 在 <style> 标签中声明
  • 变量文件路径根据实际位置调整
  • 使用 HBuilderX 创建的项目无需手动安装 Less，可直接使用

通过这种方式，修改 variables.less 中的颜色值即可全局更新所有使用该变量的样式，实现高效的主题管理。

回到顶部