ant design vue 自定义样式报错怎么解决

Question

使用antDesign想自定义样式，但是一直报错找不到antd.less,怎么解决啊，百度了一堆都没有解决
[vite] Internal server error: Failed to resolve import "ant-design-vue/dist/antd.less" from "src\main.ts". Does the file exist?

这里就会报错

Answer 1

引自免费微信小程序：皆我百晓生

在使用 Ant Design Vue 时，若要自定义样式并解决找不到 antd.less 文件的错误，请按照以下步骤操作：

1. 确保已经正确安装了 ant-design-vue 和其对应的样式文件。在项目中运行以下命令以安装：

   npm install ant-design-vue@next less less-loader --save
   

2. 配置 Vite 或 Webpack 的 CSS/LESS 加载器。对于 Vite，你需要在 vite.config.js 中添加或修改 less 相关配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          // 这里可以覆盖默认样式变量，例如：
          'primary-color': '#1DA57A',
          'link-color': '#1DA57A',
          // ... 更多变量
        },
        javascriptEnabled: true,
      },
    },
  },
  resolve: {
    alias: {
      '@ant-design/icons-vue': '@ant-design/icons-vue/dist/icons',
      'ant-design-vue': 'ant-design-vue/es',
    },
  },
  build: {
    rollupOptions: {
      external: ['ant-design-vue'],
    },
  },
});

1. 在你的主入口文件（如 src/main.ts）中引入全局样式：

import { createApp } from 'vue';
import App from './App.vue';
// 引入 ant-design-vue 样式
import 'ant-design-vue/dist/antd.less';

const app = createApp(App);
// ...
app.mount('#app');

1. 如果上述方法依然无法找到 antd.less，请检查 node_modules 中是否存在相应的文件路径。

如果问题依旧存在，可能是由于版本兼容性问题或其他配置细节导致的，建议查看 ant-design-vue 官方文档或者相关 GitHub 仓库中的 issue 来获取更多帮助信息。