版本
需要注意less版本 版本不同可能会导致less语法不同
官方提示 less-loader版本为 less-loader@6.0.0
"less": "^2.7.3",
"less-loader": "^6.0.0",
"vite": "^3.1.0",
"ant-design-vue": "^3.2.13",
首先必须先引入官方less全局配置文件
@import "ant-design-vue/dist/antd.less";
注意项
在vite.config.js做配置中做配置,需要注意此配置项:
importStyle不可设置为css或者是true,否则配置的自定义颜色不生效
颜色不可使用rgb色值,否则less可能会报错
方法一 在vite.config.js中做修改配置
export default defineConfig({
plugins: [
vue(),
Components({
resolvers: [AntDesignVueResolver({ importStyle: "less" })],
}),
],
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
charset: false,
modifyVars: {
"@primary-color": "#2cf629",
},
},
},
},
});
方法二 通过自定义样式覆盖
在引入官方less自定义主题样式文件后进行覆盖
@import "ant-design-vue/dist/antd.less";
@primary-color: red; // 全局主色