1. Instale el complemento
hilo instalar menos-cargador menos
Esta es la versión que instalé
2. Modificar babel.config.js
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins: [
[
"import",
{
libraryName: "ant-design-vue",
libraryDirectory: "es",
style: "css", // style: true 时加载的是less文件
},
],
],
};
3. Modificar la configuración de vue.config.js
module.exports = {
css: {
// css预设器配置项
loaderOptions: {
less: {
modifyVars: {
// less vars，customize ant design theme
"primary-color": "#6F4FF2",
"link-color": "#6F4FF2",
},
javascriptEnabled: true,
// prependData: `@import "@src/...`, // 引用自定义的主色
},
},
},
devServer: {
open: true,
port: 8080,
host: "0.0.0.0",
https: false,
hotOnly: true,
disableHostCheck: true,
proxy: {
},
},
};
4. estilo.principal
importar estilo
import "ant-design-vue/dist/antd.less";
Referencias:
[Cambio dinámico del color del tema ant-design-vue]