蚂蚁设计定制主题vue

Question

到目前为止，我已经用顺风和ant设计完成了我的vue3应用程序设置，但是无法自定义ant设计主题--我遵循这个指南

我犯了这个错误

 error  in ./node_modules/ant-design-vue/es/button/style/index.less

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


 @ ./node_modules/ant-design-vue/es/button/style/index.less 4:14-207 15:3-20:5 16:22-215
 @ ./node_modules/ant-design-vue/es/button/style/index.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/views/About.vue?vue&type=script&lang=js
 @ ./src/views/About.vue?vue&type=script&lang=js
 @ ./src/views/About.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.8.57:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

我在vue.config.js里有这个

css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            'primary-color': '#1DA57A',
            'link-color': '#1DA57A',
            'border-radius-base': '2px',
          },
          javascriptEnabled: true,
        },
      },
    },
  },

我还安装了越来越少的装载机。

"less": "^4.1.2",
"less-loader": "^10.2.0",

这是我的babel.config.js

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true }]],
};

我在这里做错什么了吗

Answer 1

您必须导入文件antd.less，如main.js中所示

​

​

还有你的vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            'primary-color': '#f6b26b',
            'link-color': '#f6b26b',
            'border-radius-base': '10px',
          },
          javascriptEnabled: true,
        },
      },
    },
  },
};