引入 css文件 报错
hululuuuuu opened this issue · comments
提问前请确认以下几点信息，否则你的问题将不会被解答
- 参考 https://zhuanlan.zhihu.com/p/25795393 学会正确的提问方式
- 确定已经阅读过文档 http://doc.ssr-fc.com/ 并且文档中搜索不到相关答案
- 对应服务端框架的使用问题请去它们的官方文档找答案。例如 Midway, Nest.js
- 如果你确认当前是一个 bug 请给最简复现仓库。只有一张图或者信息不足的问题将会被直接关闭
- 原则上这里只解答与本框架有关的问题。关于其他问题例如 Node.js 怎么连 Mysql 怎么获取 cookie 这种基础问题你应该去 Google 找答案而不是在这里。
详细描述你的问题
按照官方教程
https://swiperjs.com/vue#usage
就两行代码 引入
然后报错
我后面配置了一下 config.ts
依然有同样的问题
不知道是我哪里配置的不对 还是有别的解决方案
期望的结果
希望可以直接引入
当前使用的版本
whitelist添加/swiper.css/
加了之后 还是一样的错误
下面是 swiper 的结构目录
以及 swiper 的 package.json
新搭建的项目，确定错误就在
import "swiper/css";
删掉这行就好了
仔细阅读文档
whiteList:[/swiper.css/]
不要新增rule
我看了下文档，我理解 whiteList的作用，然后我把刚把cssOptions 这块儿删了，并且新增了 whiteList: [/swiper.css/]。重新启动项目，依然还是这个错误。不知道是不是我理解错了你的意思，加错地方了？
vite场景配置 whiteList: [/swiper/]
@zhangyuang 那你也泰裤辣，解决了。
顺便这里建议一下不要用import 'swiper/css' 改为 import 'swiper/swiper.min.css'。以适配webpack4以及更好的兼容性
OK OK 感谢感谢
大佬 本来不想打搅你的，不过发现 npm run start:vite 执行没问题，但是 npm run prod 会提示
还是这个配置 config.ts
whiteList: [/swiper/]
还是这样的引入
这些都没变
@zhangyuang
我知道问题了, 需要加入 ssr build --vite 之前是 ssr build .
上面说了改引入方式啊
我改了引入方式 会报错。因为项目比较急 我就没有过度纠结这个问题，等下我改一下 给你看看
在只改变引入方式的情况下
config.ts 如下
whiteList: [/swiper/],
执行 npm run start:vite 会出现如下问题
如果执行 npm run start
则会出现更多的其他问题，因为我们项目已经在迭代中了，所以不能再回头大幅修改引入方式。所以只能这样了 @zhangyuang 再次感谢
swiper/vue的引入方式也改啊
可是我想用 vite 。 npm run start:vite 会出现 Missing "./swiper.min.css" export in "swiper" package
我偏向于 vite 启动整个环节都是 vite，以后再用您的项目模板也会这样。
那你继续用这种写法吧，webpack4不支持package.json export,或者换成example用的6.x版本的swiper