安装
yarn add babel-plugin-import less less-loader
第一种方式加载css格式的
nuxt.config.js 的build添加配置
babel: {
plugins: [
['import', {
libraryName: 'vant',
"style": (name) => {
return `${name}/index.css`
}
}, 'vant']
],
},
第二种方式加载less格式的【推荐】
nuxt.config.js 的build添加配置
build: {
// 添加这个是关键，添加后babel才会处理依赖包vant里面的代码
transpile: [ /vant.*?less/ ],
babel: {
plugins: [
['import', {
libraryName: 'vant',
"style": (name) => {
return `${name}/style/less.js`
}
}, 'vant']
],
},
}
进一步使用自定义变量修改主题
loaders: {
less: {
javascriptEnabled: true,
modifyVars: {
"nav-bar-title-font-size": "80px",
}
}
}
另外在组件内注册使用也可以的
<template>
<NavBar title="标题" left-text="返回"
right-text="按钮" left-arrow />
</template>
<script>
import { NavBar } from 'vant'
export default {
components: {
NavBar
}
}
</script>
测试使用
// plugins/vant-ui.js
import Vue from 'vue'
import { NavBar } from 'vant'
Vue.use(NavBar)
// nuxt.config.js
plugins: [
{ src: '@/plugins/vant-ui', ssr: true },
],
在线 demo
end
有疑问请留言。。。
