一、修改antd主题色
先贴个官网的图片
image.png
然后说说整体流程...
- 在根目录下创建文件vue.config.js文件
module.exports = {
css: {
loaderOptions: {
less: {
lessOptions: {
modifyVars: {
'primary-color': '#ff0000',//修改全局主色，其它属性看官网
},
javascriptEnabled: true,
},
},
},
},
};
- 把main.ts中的
import 'ant-design-vue/dist/antd.css';修改为import 'ant-design-vue/dist/antd.less'; -
修改css为less的时候会报错.bezierEasingMixin()
image.png
解决方法：在package.json中，修改less-loader版本号，为6.0.0以上
"devDependencies": {
"less-loader": "^6.0.0",
}
然后重新npm i
再重新运行，就解决了
二、配置全局的reset.less
新建目录src/assets/css/reset.less用来存放全局的css变量，或者修改默认的css样式
安装插件
npm install style-resources-loader vue-cli-plugin-style-resources-loader less-loader less -S在根目录下创建文件vue.config.js（就是上边配置全局css哪个）
const path = require('path');
module.exports = {
// 第三方插件配置
pluginOptions: {
'style-resources-loader': {//添加公共得less文件
preProcessor: 'less',
patterns: [
path.resolve(__dirname, './src/assets/css/reset.less')
]
}
}
};
奉上参考资料
Vue-cli3.0配置全局less
vue antd 按需加载 报错.bezierEasingMixin()
转载请著名出处~
-----*13
