vue-cli4.5.13按需引入vant，解决vant样式失效问题

1.使用vue-cli4.5.13新建vue项目
①先全局安装最新版本的vue-cli,如果安装了旧版本的，最好先卸载

npm install-g @vue/cli #OR yarn global add @vue/cli

@创建项目

vue create 自己项目的名称

2，下载vant

npm i vant-S

3.下载babel-plugin-import并在babel.config.js中修改配置如下（babel-plugin-import文档上有详细说明如何配置）

module.exports={   presets:['@vue/cli-plugin-babel/preset'],   plugins:[['import',{       libraryName:'vant',       libraryDirectory:'es',       style:true},'vant']]}

4;使用

import{ Button}from'vant'; Vue.use(Button)

注：可在当前页面引入，也可新建一个文件，把需要的组件引入后再在main.js中引入即可

问题：按需引入后，vant样式不生效，改为全局引入也不生效
发现问题如下：

发现vue.config.js中的css配置如下   css:{     extract:true,// 是否使用css分离插件 ExtractTextPlugin     sourceMap:false,// 开启 CSS source maps?     loaderOptions:{       less:{         lessOptions:{           javascriptEnabled:true,           modifyVars:{/* less 变量覆盖，用于自定义主题 */'primary-color':'#1890FF','link-color':'#1890FF','border-radius-base':'4px'}}}},     requireModuleExtension:false**//这一项被设置成了false，导致组件库样式不生效，改为true         	就好了**},

最终配置改为：

css: { extract: true, // 是否使用css分离插件 ExtractTextPlugin sourceMap: false, // 开启 CSS source maps? loaderOptions: { less: { lessOptions: { javascriptEnabled: true, modifyVars: { /* less 变量覆盖，用于自定义主题 */ ‘primary-color’: ‘#1890FF’, ‘link-color’: ‘#1890FF’, ‘border-radius-base’: ‘4px’ } } } }, requireModuleExtension: true }

重新编译启动项目后，发现样式生效了，特意记录一下！