Vantui按需引入样式问题解决

一、出现的问题
Vantui按需引入能成功引入，但样式没了，官网好像没说到，查阅了资料才知道怎么改。

二、正确的按需引入方式

1、首先按照官网所说安装vaniui插件

# Vue 2 项目，安装 Vant 2：
npm i vant -S

# Vue 3 项目，安装 Vant 3：
npm i vant@next -S

2、然后安装按需引入插件

npm i babel-plugin-import -D

3、在.babelrc 中添加配置

{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

对于使用 babel7 的用户，可以在 babel.config.js 中配置

module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

4、都按官方的照做了，如果发现样式还是出不来，以下才是解决的重点：

• 在vue.config.js里加上以下内容，就可以了！

css: {
	extract: process.env.NODE_ENV !== 'development',
	sourceMap:true,
	requireModuleExtension: true,	
	loaderOptions: {
		stylus: {
			'resolve url': true,
			import: [
				'./src/theme'
			]
		}
	},
	modules:true
},

5、后面的可以按照官网的来了

• 在main.js文件引入用到的组件即可

import { Dialog, Toast, Loading } from 'vant';
Vue.use(Dialog).use(Toast).use(Loading);

• 使用方法，如：

_this.$dialog.confirm({
  title: '',
  message: '确定吗？',
}).then(() => {

}).catch(() => {
				         
});