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
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。