vue3 配置ant-vue的主题色

1 安装less

npm i less --save-dev

安装 less loader，注意要安装less的固定版本，因为默认安装时，会出现版本过高的错误提示，导致yarn serve无法启动

npm install -D less-loader@7.x

 下面的错误是默认安装less，less loader时，因为版本过高所导致的错误

Syntax Error: TypeError: this.getOptions is not a function

 2 安装 ant vue

npm i --save ant-design-vue@next

同时，要修改main.ts中的引用方法

import Antd from 'ant-design-vue'

// import 'ant-design-vue/dist/antd.css'

//使用less时，需要引用ant的less文件，否则会不成功 

import 'ant-design-vue/dist/antd.less'

3 在根目录下新建vue.config.js

const path = require('path')

module.exports = {
  // 选项...
  publicPath: process.env.NODE_ENV === 'production' ? '' : '/', // 通常用于确定在开发环境还是生产环境
  outputDir: 'dist', // 打包文件输出目录, 默认打包到dist文件下
  assetsDir: 'static', // 放置静态资源
  pages: {
    index: {
      // page 的入口
      entry: 'src/main.ts',
      // 模板来源
      template: 'public/index.html',
      // 修改模板引擎title
      title: 'Vue3 学习',
      // 在 dist/index.html 的输出
      filename: 'index.html',
    },
  },
  lintOnSave: false, // 设置是否在开发环境下每次保存代码时都启用 eslint验证
  runtimeCompiler: false, // 是否使用带有浏览器内编译器的完整构建版本
  configureWebpack: {
    // 别名配置
    resolve: {
      alias: {
        src: '@', // 默认已配置
        assets: '@/assets',
        common: '@/common',
        components: '@/components',
        api: '@/api',
        views: '@/views',
        plugins: '@/plugins',
        utils: '@/utils',
      },
    },
  },
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        // 存放less变量文件的路径
        path.resolve(__dirname, './src/assets/less/common.less'),
      ],
    },
  },
  //打包的css路径及命名
  css: {
    modules: false,
    //vue 文件中修改css 不生效 注释掉  extract:true
    extract: {
      filename: 'style/[name].[hash:8].css',
      chunkFilename: 'style/[name].[hash:8].css',
    },

    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            // 'primary-color': '#ec6800',
            // 配置主题色，及其它公共less配置
            'primary-color': '#fc5531',
            'link-color': '#1DA57A',
            'border-radius-base': '8px',
          },
          javascriptEnabled: true,
        },
      },
    },
  },
  chainWebpack: (config) => {
    // 允许对内部的 webpack 配置进行更细粒度的修改。
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap((options) => Object.assign(options, { limit: 10240 }))
  },
  devServer: {
    host: 'localhost',
    port: 8090, // 端口号
    hotOnly: true, // 热更新
    https: false, // https:{type:Boolean}配置前缀
    open: false, //配置自动启动浏览器
    proxy: {
      '/api': {
        target: 'url',
        // 是否允许跨域
        changeOrigin: true,
        secure: false, // 如果是https接口，需要配置这个参数
        ws: true, //如果要代理 websockets，配置这个参数
        pathRewrite: {
          '^/api': '',
        },
      },
    },
  },
}

4 运行项目

yarn serve

在页中引入你的ant组件，现在已经改了主题色了