Vant: 按需引入vant到vue脚手架里面 不显示样式

Created on 19 Nov 2019  ·  37Comments  ·  Source: youzan/vant

main.js
import Vue from 'vue' import App from './App.vue' import { Button } from 'vant' import { Popup } from 'vant' import 'vant/lib/index.css'; Vue.use(Button); Vue.use( Popup);

组件.vue里
组件可以显示 但是样式不显示

image

只能通过script的方式单独引入index.css 求问该如何解决

picture ghostsatan

Most helpful comment

找到问题所在了，vue.config.js的css配置中去掉即可requireModuleExtension: false，默认为true

picture EsionMa on 2 Dec 2019
👍3

All 37 comments

https://codesandbox.io/s/

可以贴一下能重现的例子？

nailuoGG picture nailuoGG on 19 Nov 2019

https://codesandbox.io/s/

可以贴一下能重现的例子？

https://codesandbox.io/s/vue-template-dl1rb

这个竟然好用 但是我本地的代码 跟这个一样的 是其他地方出了问题吗？

ghostsatan picture ghostsatan on 19 Nov 2019

https://codesandbox.io/s/

可以贴一下能重现的例子？

image

image
同样的代码

ghostsatan picture ghostsatan on 19 Nov 2019

https://codesandbox.io/s/

可以贴一下能重现的例子？

{
"name": "vue-vant",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.3.2",
"router": "^1.3.3",
"vant": "^2.2.13",
"vue": "^2.6.10",
"vue-router": "^3.1.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.0.0",
"@vue/cli-plugin-eslint": "^4.0.0",
"@vue/cli-service": "^4.0.0",
"babel-eslint": "^10.0.3",
"babel-plugin-import": "^1.12.2",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"less": "^3.8.1",
"less-loader": "^5.0.0",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}

这是我的pakage.json 一天都是这样 很费解啊

ghostsatan picture ghostsatan on 19 Nov 2019

遇到同样问题了，怎么解决啊

EsionMa picture EsionMa on 20 Nov 2019

遇到同样问题了，怎么解决啊

你用的脚手架版本是哪个版本

ghostsatan picture ghostsatan on 20 Nov 2019

遇到同样问题了，怎么解决啊

你用的脚手架版本是哪个版本

最新版vue-cli 4.0.5

EsionMa picture EsionMa on 20 Nov 2019

遇到同样问题了，怎么解决啊

你用的脚手架版本是哪个版本

最新版vue-cli 4.0.5

应该就是版本的问题 3.0以及3.0以上的 会出现这个问题 3.0以下的 目前我看都是没问题的 等待官方回应把

ghostsatan picture ghostsatan on 20 Nov 2019

遇到同样问题了，怎么解决啊

你用的脚手架版本是哪个版本

最新版vue-cli 4.0.5

应该就是版本的问题 3.0以及3.0以上的 会出现这个问题 3.0以下的 目前我看都是没问题的 等待官方回应把

手动引入css可以？我的也不行

EsionMa picture EsionMa on 20 Nov 2019

我在index.html里面 script方式手动引入index.css是可以的

感觉问题就出在import 'vant/lib/index.css'; 这句话上

ghostsatan picture ghostsatan on 20 Nov 2019

2.0版本的脚手架是没有问题的，就是3.0以及以上会出现问题
我是按需引入的。。。 。。。 这个问题好蛋疼 期待官方回复

ghostsatan picture ghostsatan on 20 Nov 2019

遇到同样问题了，怎么解决啊

你用的脚手架版本是哪个版本

最新版vue-cli 4.0.5

应该就是版本的问题 3.0以及3.0以上的 会出现这个问题 3.0以下的 目前我看都是没问题的 等待官方回应把

手动引入css可以？我的也不行

https://github.com/youzan/vant/issues/5041#issuecomment-555777407
我在index.html里面 script方式手动引入index.css是可以的

感觉问题就出在import 'vant/lib/index.css'; 这句话上

2.0版本的脚手架是没有问题的，就是3.0以及以上会出现问题
我是按需引入的。。。 。。。 这个问题好蛋疼 期待官方回复

你去 https://codesandbox.io/s/ 这个上试一试

ghostsatan picture ghostsatan on 20 Nov 2019

遇到同样问题了，怎么解决啊

你用的脚手架版本是哪个版本

最新版vue-cli 4.0.5

应该就是版本的问题 3.0以及3.0以上的 会出现这个问题 3.0以下的 目前我看都是没问题的 等待官方回应把

手动引入css可以？我的也不行

#5041 (comment)
我在index.html里面 script方式手动引入index.css是可以的

感觉问题就出在import 'vant/lib/index.css'; 这句话上

2.0版本的脚手架是没有问题的，就是3.0以及以上会出现问题
我是按需引入的。。。 。。。 这个问题好蛋疼 期待官方回复

你去 https://codesandbox.io/s/ 这个上试一试

现在都3.0以上了，肯定得适配了，官方得加紧修复更新哦

EsionMa picture EsionMa on 20 Nov 2019

遇到同样问题了，怎么解决啊

你用的脚手架版本是哪个版本

最新版vue-cli 4.0.5

应该就是版本的问题 3.0以及3.0以上的 会出现这个问题 3.0以下的 目前我看都是没问题的 等待官方回应把

手动引入css可以？我的也不行

#5041 (comment)
我在index.html里面 script方式手动引入index.css是可以的
感觉问题就出在import 'vant/lib/index.css'; 这句话上
2.0版本的脚手架是没有问题的，就是3.0以及以上会出现问题
我是按需引入的。。。 。。。 这个问题好蛋疼 期待官方回复
你去 https://codesandbox.io/s/ 这个上试一试

现在都3.0以上了，肯定得适配了，官方得加紧修复更新哦
@vue/[email protected] 这个版本 会出现上述描述的问题
[email protected] 这个版本 不会出现

ghostsatan picture ghostsatan on 20 Nov 2019

https://codesandbox.io/s/

可以贴一下能重现的例子？

@vue/[email protected] 这个版本 会出现上述描述的问题
[email protected] 这个版本 不会出现

ghostsatan picture ghostsatan on 20 Nov 2019

https://codesandbox.io/s/
可以贴一下能重现的例子？

@vue/[email protected] 这个版本 会出现上述描述的问题
[email protected] 这个版本 不会出现

我先现在引入是通过cdn，没问题

EsionMa picture EsionMa on 20 Nov 2019

https://codesandbox.io/s/
可以贴一下能重现的例子？

@vue/[email protected] 这个版本 会出现上述描述的问题
[email protected] 这个版本 不会出现

我先现在引入是通过cdn，没问题

cdn 在index.html里面引入是没问题的

但是脚手架 不是应该不用cdn吗 我不知道这是不是个bug
脚手架3.0以下的没有这个问题

ghostsatan picture ghostsatan on 20 Nov 2019

https://codesandbox.io/s/
可以贴一下能重现的例子？

@vue/[email protected] 这个版本 会出现上述描述的问题
[email protected] 这个版本 不会出现

我先现在引入是通过cdn，没问题

cdn 在index.html里面引入是没问题的

但是脚手架 不是应该不用cdn吗 我不知道这是不是个bug
脚手架3.0以下的没有这个问题

单引模块下的index.css都有问题，只有cdn没问题

EsionMa picture EsionMa on 20 Nov 2019

https://codesandbox.io/s/
可以贴一下能重现的例子？

@vue/[email protected] 这个版本 会出现上述描述的问题
[email protected] 这个版本 不会出现

我先现在引入是通过cdn，没问题

cdn 在index.html里面引入是没问题的
但是脚手架 不是应该不用cdn吗 我不知道这是不是个bug
脚手架3.0以下的没有这个问题

单引模块下的index.css都有问题，只有cdn没问题

我刚刚试了一下 单独引入模块下得index.css也不行 只有cdn可以。。。 。。。

cli版本跟你一致 神了。。。

ghostsatan picture ghostsatan on 20 Nov 2019

可以参考 https://github.com/youzan/vant-demo，用的就是 vue-cli 3

chenjiahan picture chenjiahan on 21 Nov 2019

我也遇到同样的问题， 对比了vant-demo ,没有发现有什么不同，甚至复制了bable.config.js , 样式同样没有生效，手动引入的样式文件，才可以， 好奇怪， 有什么特殊要注意的么

badxchen picture badxchen on 21 Nov 2019

可以参考 https://github.com/youzan/vant-demo，用的就是 vue-cli 3

为啥关掉啊 用官方的也不行啊 跟官方一样的配置 也不好用

ghostsatan picture ghostsatan on 22 Nov 2019

就是看了demo后才提的问题，这....

EsionMa picture EsionMa on 22 Nov 2019

就是看了demo后才提的问题，这....

感觉像是玄学 官网没给回应

我怀疑我们自己有毒？？？

ghostsatan picture ghostsatan on 22 Nov 2019

你们把 vue-cli 版本锁定到与 vant-demo 一致的版本试下，这个问题显然与 Vant 无关

chenjiahan picture chenjiahan on 22 Nov 2019

就是看了demo后才提的问题，这....

感觉像是玄学 官网没给回应

我怀疑我们自己有毒？？？

就是看了demo后才提的问题，这....

感觉像是玄学 官网没给回应

我怀疑我们自己有毒？？？

兄弟 找到解決方法沒

EsionMa picture EsionMa on 25 Nov 2019

找到问题所在了，vue.config.js的css配置中去掉即可requireModuleExtension: false，默认为true

EsionMa picture EsionMa on 2 Dec 2019
👍3

找到问题所在了，vue.config.js的css配置中去掉即可requireModuleExtension: false，默认为true

你这是怎么找到这一步的我想知道

ghostsatan picture ghostsatan on 2 Dec 2019

找到问题所在了，vue.config.js的css配置中去掉即可requireModuleExtension: false，默认为true

果然是这个问题 妈的 我的vue.config.js 是从网上随便贴了一个 没想到给我埋了这么大一个坑

ghostsatan picture ghostsatan on 2 Dec 2019

看配置文件，对照vue-cli官方

EsionMa picture EsionMa on 2 Dec 2019

找到问题所在了，vue.config.js的css配置中去掉即可requireModuleExtension: false，默认为true

vue:2.6.10
vant: 2.2.16
babel-plugin-import: 1.13.0

vue.config.js 没有设置了requireModuleExtension：false，但是也不行

nightmaring picture nightmaring on 9 Dec 2019

找到问题所在了，vue.config.js的css配置中去掉即可requireModuleExtension: false，默认为true

今天更新后也发现这个问题，问题解决，感谢

M69W picture M69W on 11 Dec 2019

找到问题所在了，vue.config.js的css配置中去掉即可requireModuleExtension: false，默认为true

vue:2.6.10
vant: 2.2.16
babel-plugin-import: 1.13.0

vue.config.js 没有设置了requireModuleExtension：false，但是也不行

重启了吗

ghostsatan picture ghostsatan on 11 Dec 2019

找到问题所在了，vue.config.js的css配置中去掉即可requireModuleExtension: false，默认为true

今天更新后也发现这个问题，问题解决，感谢

事实告诉我们 不要乱用vue.config.js的默认配置

ghostsatan picture ghostsatan on 11 Dec 2019

找到问题所在了，vue.config.js的css配置中去掉即可requireModuleExtension: false，默认为true

今天更新后也发现这个问题，问题解决，感谢

事实告诉我们 不要乱用vue.config.js的默认配置

开始只更新依赖，提示 modules 已被 requireModuleExtension取代更好blabla ，改之，没问题。
然后更新vant 和 其他，问题就来了，还不知道是哪里引起的:joy:

M69W picture M69W on 11 Dec 2019

我这里是build后会有样式丢失的问题，后来到vue.config.js中把parallel设置为false就ok了

wjl930526 picture wjl930526 on 12 Dec 2019
👍1

有用 vue.config.js中 去掉requireModuleExtension: false 这个就可以了

zhouyupeng picture zhouyupeng on 27 Oct 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

LiGuoBi picture LiGuoBi  ·  4Comments
skyzfdance picture skyzfdance  ·  3Comments
353170753 picture 353170753  ·  3Comments
thiszhong picture thiszhong  ·  3Comments
zwind007 picture zwind007  ·  4Comments