[英]ant design customize theme vue
i got my vue3 application setup so far with tailwind, and ant design but can't customize ant design theme i am following this guide到目前为止,我的 vue3 应用程序设置是顺风和 ant 设计,但无法自定义 ant 设计主题我正在遵循本指南
i got this error我收到了这个错误
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
i have this in vue.config.js
我在vue.config.js
中有这个
css: {
loaderOptions: {
less: {
lessOptions: {
modifyVars: {
'primary-color': '#1DA57A',
'link-color': '#1DA57A',
'border-radius-base': '2px',
},
javascriptEnabled: true,
},
},
},
},
i've also installed less and less loader.我也安装了越来越少的装载机。
"less": "^4.1.2",
"less-loader": "^10.2.0",
and here is my babel.config.js
这是我的babel.config.js
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
plugins: [['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true }]],
};
am i doing anything wrong here我在这里做错什么了吗
You have to import the file antd.less
as follows in main.js
:您必须在main.js
中导入文件antd.less
,如下所示:
And your vue.config.js
:还有你的vue.config.js
:
module.exports = {
css: {
loaderOptions: {
less: {
lessOptions: {
modifyVars: {
'primary-color': '#f6b26b',
'link-color': '#f6b26b',
'border-radius-base': '10px',
},
javascriptEnabled: true,
},
},
},
},
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.