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 less-loader@6.0.0 --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使用：
<template>
<div class="hello">
<a-button type="primary" @click="btnClick">antd按钮 </a-button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
methods: {
btnClick () {
this.$message.info('这是一条消息')
}
}
}
</script>
<style scoped>
</style>
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 less-loader@6.0.0 --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 使用组件
<template>
<div class="hello">
<a-button type="primary" @click="btnClick">antd按钮 </a-button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
methods: {
btnClick () {
this.$message.info('这是一条消息')
}
}
}
</script>
<style scoped>
</style>
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 less-loader@6.0.0 --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 使用组件
<template>
<div class="hello">
<a-button type="primary" @click="btnClick">antd按钮 </a-button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
methods: {
btnClick () {
this.$message.info('这是一条消息')
}
}
}
</script>
<style scoped>
</style>
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' 。
网友评论