Conseguí la configuración de mi aplicación vue3 hasta ahora con viento de cola y diseño de hormigas, pero no puedo personalizar el tema de diseño de hormigas. Estoy siguiendo esta guía.
tengo este 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
tengo esto en vue.config.js
css: { loaderOptions: { less: { lessOptions: { modifyVars: { 'primary-color': '#1DA57A', 'link-color': '#1DA57A', 'border-radius-base': '2px', }, javascriptEnabled: true, }, }, }, },
También he instalado cada vez menos cargador.
"less": "^4.1.2", "less-loader": "^10.2.0",
y aquí está mi babel.config.js
module.exports = { presets: ['@vue/cli-plugin-babel/preset'], plugins: [['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true }]], };
¿Estoy haciendo algo mal aquí?
Tienes que importar el archivo antd.less
de la siguiente manera en main.js
:
Y su vue.config.js
:
module.exports = { css: { loaderOptions: { less: { lessOptions: { modifyVars: { 'primary-color': '#f6b26b', 'link-color': '#f6b26b', 'border-radius-base': '10px', }, javascriptEnabled: true, }, }, }, }, };