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
}

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

手赚鸭会员

打赏 收藏 海报 链接