vue使用vant插件 样式不生效的问题

安装vant插件是无法显示加载vant里面的样式的，需要额外再装一个babel-plugin-import插件。步骤如下：

步骤一：安装babel-plugin-import

cnpm install babel-plugin-import --save

步骤二：在.babelrc文件中增加如下代码["import", {"libraryName": "vant","style": true}]

.babelrc文件全部代码如下:

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime", ["import", {
    "libraryName": "vant",
    "style": true
  }]]
}

 

 

 

和使用element-ui插件样式不生效的问题是一样的，都需要额外装一个其他的插件

步骤一：执行如下命令，安装babel-plugin-component

sudo cnpm install babel-plugin-component  --save

步骤二：在vue项目的.babelrc文件中增加如下JSON

"plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] 

 

image.png

步骤三：如果仅做如上两步骤会报错，具体参考我的这篇文章

解决vue使用element-ui时，报xxx/element-ui/lib/theme-chalk/fonts/element-icons.ttf的问题

转：
作者：CoderZb
链接：https://www.jianshu.com/p/fce90e170d02
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。