arco design pro （vue） 修改组件的颜色无效怎么办

[chenbinli-dev]

没用啊

[hehehai]

@coderlcb hi, 可以参考该 问题

参考：https://stackblitz.com/edit/vitejs-vite-qy4cey?file=vite.config.ts （使用了 vite3）

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { ArcoResolver } from 'unplugin-vue-components/resolvers';

// https://vitejs.dev/config/
export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: { 'color-primary-6': '#13c2c2' },
      },
    },
  },
  plugins: [
    vue(),
    Components({
      resolvers: [
        ArcoResolver({
          importStyle: 'less',
        }),
      ],
    }),
  ],
});

less 变量可以使用 css 变量来调整（明暗模式影响的是 css 变量）

css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          'primary-6': `rgb(var(~'@{arco-cssvars-prefix}-green-6'))`,
          'dark-primary-6': `rgb(var(~'@{arco-cssvars-prefix}-orange-6'))`,
        },
      },
    },
  },

这里主题自定义建议使用官方的主题设计系统来配置

[chenbinli-dev]

没有用。。。。

[hehehai]

用 Stackblitz 发一个复现吧

[chenbinli-dev]

用 Stackblitz 发一个复现吧

找到问题了,pro项目初始化后main.ts默认导入了组件库的css文件，换成less就可以了。