vue使用vant插件 样式不生效的问题
安装
vant
插件是无法显示加载vant里面的样式的,需要额外再装一个babel-plugin-import
插件。步骤如下:
步骤一:安装babel-plugin-import
cnpm install babel-plugin-import --save
步骤二:在.babelrc
文件中增加如下代码["import", {"libraryName": "vant","style": true}]
.babelrc
文件全部代码如下:
1 { 2 "presets": [ 3 ["env", { 4 "modules": false, 5 "targets": { 6 "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 } 8 }], 9 "stage-2" 10 ], 11 "plugins": ["transform-vue-jsx", "transform-runtime", ["import", { 12 "libraryName": "vant", 13 "style": true 14 }]] 15 }
和使用element-ui
插件样式不生效的问题是一样的,都需要额外装一个其他的插件
步骤一:执行如下命令,安装babel-plugin-component
sudo cnpm install babel-plugin-component --save
步骤二:在vue项目的.babelrc
文件中增加如下JSON
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
步骤三:如果仅做如上两步骤会报错,具体参考我的这篇文章
解决vue使用element-ui时,报xxx/element-ui/lib/theme-chalk/fonts/element-icons.ttf的问题
转:
作者:CoderZb
链接:https://www.jianshu.com/p/fce90e170d02
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。