2.ant定制主题

1.按需加载组件定制主题

1.1 安装babel-plugin-import插件

npm install babel-plugin-import --save-dev

1.2 babel.config.js配置babel-plugin-import插件

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'ant-design-vue',
      libraryDirectory: 'es',
      style: true //默认导入的样式文件为less文件
    }]
  ]
}

注意：因为style:true, 默认导入的式less样式文件，需要安装less-loader来解析less文件

npm install [email protected] --save-dev

此处我指定了less-loader版本，因为不指定版本会默认安装最新版本，安装会失败报错，而安装less-loader的4，3版本，ant定制主题会失败

1.3 vue.config.js配置主题定制

module.exports = {
  lintOnSave: false,
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          // If you are using less-loader@5 please spread the lessOptions to options directly
          modifyVars: {
            'primary-color': '#eeeeee',
            'link-color': '#1DA57A',
            'border-radius-base': '2px',
          },
          javascriptEnabled: true,
        },
      },
    },
  },
}

1.4 按需加载ant组件

import Vue from 'vue'
import App from './App.vue'

//按需引入：babel-plugin-import会帮你转换为import Button from 'ant-design-vue/lib/button'
import {Button} from 'ant-design-vue'
Vue.use(Button)
Vue.prototype.$message = message

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

1.5使用：

image.png

也可以通过建立一个单独的 less 变量文件，引入这个文件覆盖 antd.less 里的变量。

建立一个样式文件src/assets/your-theme-file.less

@primary-color: #ff0000;

注意： #ff0000一定不要用引号括起来。less样式文件声明变量格式如此
1.3 vue.config.js配置主题定制修改为如下：

const path = require('path')
const filePath = path.resolve(__dirname, 'src/assets/your-theme-file.less')
module.exports = {
  lintOnSave: false,
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          // If you are using less-loader@5 please spread the lessOptions to options directly
          modifyVars: {
            // 'primary-color': '#eeeeee',
            // 'link-color': '#1DA57A',
            // 'border-radius-base': '2px',
            hack: `true; @import "${filePath}";` //导入自定义样式文件 less
          },
          javascriptEnabled: true,
        }
      }
    }
  }
}

2. 整体导入组件定制主题

方式一：

2.1 在main.js中整体导入组件

import Vue from 'vue'
import App from './App.vue'

// 整体导入:
import antd from 'ant-design-vue'
// 需要手动导入样式文件，必须是less文件
import 'ant-design-vue/dist/antd.less'

Vue.use(antd)

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

备注：记住一定要导入less样式文件

2.2 导入的是less样式文件，需要安装less-loader来解析less文件

npm install [email protected] --save-dev

此处我指定了less-loader版本，因为不指定版本会默认安装最新版本，安装会失败报错，而安装less-loader的4，3版本，ant定制主题会失败

2.3 vue.config.js配置less

module.exports = {
  lintOnSave: false,
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          // If you are using less-loader@5 please spread the lessOptions to options directly
          modifyVars: {
            'primary-color': '#ff0000',
            'link-color': '#1DA57A',
            'border-radius-base': '2px'
          },
          javascriptEnabled: true,
        }
      }
    }
  }
}

2.4 使用组件

2.5 运行项目，查看效果：按钮变成了红色

image.png

也可以通过建立一个单独的 less 变量文件，引入这个文件覆盖 antd.less 里的变量。

建立一个样式文件src/assets/your-theme-file.less

@primary-color: #ff0000;

注意： #ff0000一定不要用引号括起来。less样式文件声明变量格式如此
2.3 vue.config.js配置主题定制修改为如下：

const path = require('path')
const filePath = path.resolve(__dirname, 'src/assets/your-theme-file.less')
module.exports = {
  lintOnSave: false,
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          // If you are using less-loader@5 please spread the lessOptions to options directly
          modifyVars: {
            // 'primary-color': '#ff0000',
            // 'link-color': '#1DA57A',
            // 'border-radius-base': '2px'
            hack: `true; @import "${filePath}";`
          },
          javascriptEnabled: true
        }
      }
    }
  }
}

方式二：

2.1 建立一个样式文件src/assets/your-theme-file.less,并在其中导入ant整体样式

//导入整体的ant样式
@import '~ant-design-vue/dist/antd.less';
@primary-color: #ff0000;

2.2 在main.js中整体导入组件，并导入自定义less样式文件

import Vue from 'vue'
import App from './App.vue'

// 整体导入:
import antd from 'ant-design-vue'
// 导入自定义样式文件，必须是less文件
import './assets/your-theme-file.less'
Vue.use(antd)

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

2.3 导入的是less样式文件，需要安装less-loader来解析less文件

npm install [email protected] --save-dev

此处我指定了less-loader版本，因为不指定版本会默认安装最新版本，安装会失败报错，而安装less-loader的4，3版本，ant定制主题会失败

2.4 vue.config.js配置less-loader

module.exports = {
  lintOnSave: false,
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          // If you are using less-loader@5 please spread the lessOptions to options directly
          javascriptEnabled: true
        }
      }
    }
  }
}

2.5 使用组件

2.6 运行项目，查看效果：按钮变成了红色

image.png

未生效解决方法：

1.注意样式必须加载 less 格式，一个常见的问题就是引入了多份样式，less 的样式被 css 的样式覆盖了。

2.如果在使用 babel-plugin-import 的 style 配置来引入样式，需要将配置值从 'css' 改为 true , 这样会引入 less 文件。

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'ant-design-vue',
      libraryDirectory: 'es',
      style: true //默认导入的样式文件为less文件
    }]
  ]
}

如果是通过 'ant-design-vue/dist/antd.css' 引入样式的，改为 'ant-design-vue/dist/antd.less' 。