vue-cli3使用ant desgin for vue如何自定义主题

    技术2024-01-03  93

    官方已经给出了自定义主题的方式,基本上跟着操作就可以了,这里只是记录一下几个重点

    官方网址:https://www.antdv.com/docs/vue/customize-theme-cn/

    关键点记录:

    如果项目使用的是scss/sass预处理器,则需要安装less和less-loader,vue-cli3已经在底层预留了less配置,因此无需查找文件添加配置 ​​​​​​​​​​​​​​cnpm install less less-loader --save-dev 如果使用了按需引入babel-plugin-import,需要蒋style值改为true,以便引入less plugins: [ ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": true}] // `style: true` 会加载 less 文件 ] vue-cli3覆盖less变量,需要在vue.config.js配置,所有的变量点击这里 css: { // requireModuleExtension: false, // 这句话不能要,否则css样式不起效 loaderOptions: { less: { // 这里的选项会传递给 less-loader lessOptions: { modifyVars: { "primary-color": "#1DA57A", "link-color": "#1DA57A", "border-radius-base": "2px" }, javascriptEnabled: true // 这句话必须要,否则不起效 } } } }

     

    Processed: 0.017, SQL: 9