Antd 使用的是 less。所以我们这里保持一致。

虽然 vite 原生支持 less/sass/scss/stylus，但是你必须手动安装他们的预处理器依赖

安装

yarn add -D less

简单使用

配置全局 less 样式文件

在 src/ 下新增 styles 文件夹，用于存放全局样式文件

新建 main.less, 设置一个颜色变量 :

@primary-color: #1890ff;

配置 preprocessorOptions

如何将这个样式文件全局注入到项目中呢？配置 Vite 即可：

css: {
  preprocessorOptions: {
    less: {
      additionalData: '@import "@/styles/main.less";', // 没有 resolve.alias 别名的话 路径为./src/styles/main.less
    },
  },
},

css.preprocessorOptions 指定传递给 CSS 预处理器的选项。

组件中使用

<style scoped lang="less">
a {
  color: @primary-color;
}
</style>

全局样式设计

在根目录下的：src\styles文件夹中定义了系统所有 全局样式 和 全局less变量 。其中分为两大类：

• src\styles\index.less：全局样式，在 main.ts 中使用。
• src\styles\config.less：全局变量，在 vite.config.ts 中使用。

该文件夹下的其他文件，都被直接或间接的引入到了 index.less、config.less 中。