Vite自定义主题颜色不起效

[fairySusan]

• [ ] I'm sure this does not appear in the issue list of the repository

Basic Info

• Package Name And Version: @arco-design/[email protected]
• Framework version: Vue^3.2.37
• Browser: chrome104.0.0.0

Steps to reproduce

按需引入的时候：modifyVars里设置的变量替换全都不起效 vite.config.ts:

css: {
     preprocessorOptions: {
       less: {
         modifyVars: {
         'arcoblue-6': '#ff0000',
         },
        // additionalData: `@import "@/assets/styles/index.less";`,
         javascriptEnabled: true,
       }
     }
   },
   plugins: [
     vue(),
     AutoImport({
       resolvers: [ArcoResolver()],
     }),
     Components({
       resolvers: [ArcoResolver({
           sideEffect: true,
           importStyle: "less",
         })]
     })
   ],

[maxiangsai]

我的也是，采用的是按需加载模板的形式

[hehehai]

@fairySusan @maxiangsai 参考：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',
        }),
      ],
    }),
  ],
});

[maxiangsai]

@hehehai 感谢大佬

[maxiangsai]

@fairySusan @maxiangsai 参考：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',
        }),
      ],
    }),
  ],
});

还有个问题，就是修改 color-primary-6 后，在使用的时候这样用 color: rgb(var(--arcoblue-6))，在light模式下没问题，但是在暗黑模式下，我也修改了 dark-primary-6 ，页面上却没有展示修改后的颜色。这种应该怎么修改暗黑模式下的变量？

[hehehai]

@maxiangsai 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'))`,
        },
      },
    },
  },

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

[maxiangsai]

@hehehai 好的，谢谢了

[szmetro2019]

[szmetro2019]

import path from 'node:path'; import { fileURLToPath, URL } from 'node:url';

import vue from '@vitejs/plugin-vue'; import vueJsx from '@vitejs/plugin-vue-jsx'; import { resolve } from 'path'; import AutoImport from 'unplugin-auto-import/vite'; import { ArcoResolver } from 'unplugin-vue-components/resolvers'; import Components from 'unplugin-vue-components/vite'; import { defineConfig, loadEnv } from 'vite'; // https://vitejs.dev/config/ // 当前工作目录路径 const root: string = process.cwd(); export default defineConfig(({ command, mode }) => { // 环境变量 const env = loadEnv(mode, root, ''); console.log(command, env.VITE_NODE_ENV, 'env'); return { css: { preprocessorOptions: { less: { modifyVars: { hack: true; @import (reference) "${resolve('src/styles/breakpoint.less')}"; }, javascriptEnabled: true } } }, plugins: [ AutoImport({ resolvers: [ArcoResolver()] }), Components({ resolvers: [ ArcoResolver({ sideEffect: true, importStyle: 'less' }) ] }) ], }; }); ---亲测有效--- /styles/breakpoint.less // @arcoblue-6: red;