Vite环境下如何修改Arco Design默认主题标签@arco-theme-tag

核心配置修正 #

你的vite.config.ts中varsInjectScope的配置格式错误，它需要接收目标选择器字符串而非空对象。修正后的完整配置如下：

css: {
    modules: {
      localsConvention: 'dashes',
    },
    preprocessorOptions: {
      scss: {},
      less: {
        javascriptEnabled: true,
        modifyVars: {
          'arco-theme-tag': '.easy-email',
        },
        // 传入自定义主题标签对应的选择器
        varsInjectScope: '.easy-email',
      },
    },
  },

必要的配套操作 #

• 添加目标类名到页面容器
  必须在应用的根容器（比如index.html的挂载容器或根组件的外层元素）上添加.easy-email类名，否则主题样式无法作用到组件上。示例：

  <!-- index.html 中的挂载容器 -->
  <div id="app" class="easy-email"></div>
  

• 确认样式引入类型
  如果是全量引入Arco样式，务必引入Less版本的样式文件（如@arco-design/web-react/dist/css/arco.less，对应Vue版本为@arco-design/web-vue/dist/arco.less），不要使用编译后的CSS文件——只有Less文件才能识别并应用你定义的主题变量。

验证生效状态 #

重启Vite服务后，打开浏览器开发者工具，检查Arco组件的样式是否被包裹在.easy-email选择器下。例如：

.easy-email .arco-btn {
  /* 主题化后的按钮样式 */
}

若出现此类嵌套样式，说明配置已生效。

内容的提问来源于stack exchange，提问作者step