引入 css文件 报错

[hululuuuuu]

提问前请确认以下几点信息，否则你的问题将不会被解答

• 参考 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

依然有同样的问题
不知道是我哪里配置的不对 还是有别的解决方案

期望的结果

希望可以直接引入

当前使用的版本

[zhangyuang]

whitelist添加/swiper.css/

[hululuuuuu]

加了之后 还是一样的错误

下面是 swiper 的结构目录

以及 swiper 的 package.json

[hululuuuuu]

新搭建的项目，确定错误就在
import "swiper/css";
删掉这行就好了

[zhangyuang]

仔细阅读文档

whiteList:[/swiper.css/]
不要新增rule

[hululuuuuu]

我看了下文档，我理解 whiteList的作用，然后我把刚把cssOptions 这块儿删了，并且新增了 whiteList: [/swiper.css/]。重新启动项目，依然还是这个错误。不知道是不是我理解错了你的意思，加错地方了？

[zhangyuang]

vite场景配置 whiteList: [/swiper/]

[hululuuuuu]

@zhangyuang 那你也泰裤辣，解决了。

[zhangyuang]

顺便这里建议一下不要用import 'swiper/css' 改为 import 'swiper/swiper.min.css'。以适配webpack4以及更好的兼容性

[hululuuuuu]

OK OK 感谢感谢

[hululuuuuu]

大佬 本来不想打搅你的，不过发现 npm run start:vite 执行没问题，但是 npm run prod 会提示

还是这个配置 config.ts
whiteList: [/swiper/]
还是这样的引入

这些都没变
@zhangyuang

[hululuuuuu]

我知道问题了, 需要加入 ssr build --vite 之前是 ssr build .

[zhangyuang]

上面说了改引入方式啊

[hululuuuuu]

我改了引入方式 会报错。因为项目比较急 我就没有过度纠结这个问题，等下我改一下 给你看看

[hululuuuuu]

在只改变引入方式的情况下
config.ts 如下
whiteList: [/swiper/],
执行 npm run start:vite 会出现如下问题

如果执行 npm run start


则会出现更多的其他问题，因为我们项目已经在迭代中了，所以不能再回头大幅修改引入方式。所以只能这样了 @zhangyuang 再次感谢

[zhangyuang]

swiper/vue的引入方式也改啊

[hululuuuuu]

可是我想用 vite 。 npm run start:vite 会出现 Missing "./swiper.min.css" export in "swiper" package

我偏向于 vite 启动整个环节都是 vite，以后再用您的项目模板也会这样。

[zhangyuang]

那你继续用这种写法吧，webpack4不支持package.json export,或者换成example用的6.x版本的swiper