乐趣区

关于前端:swiper样式引入不生效

背景

之前我的项目中遇到 swiper 的款式引入了不失效的问题,在网上搜了挺久也没找到解决办法。最初在 GitHub 的 issue 中找到了问题,记录一下不便后续遇到这个问题的小伙伴定位问题吧

问题及起因

在 swiper 的官网 demo 中,是通过间接引入 scss 文件进行款式的援用。
下图 demo 可在 swiperjs.com/react 中查看

然而引入了这些款式文件后发现页面上并没有相应的款式。
进入对应的组件查看 package.json 文件,发现 sideEffects 设置的为 false,这就导致了 webpack 打包的时候将间接 import 的款式 tree shaking 掉了。具体可查看 webpack 文档:webpack.docschina.org/guides/tree…

解决办法

解决办法呢很简略,通过 require 引入,或者是 import style from 的模式将款式引入并应用。

作者:CK 哈哈哈
链接:https://juejin.cn/post/698275…
起源:掘金
著作权归作者所有。商业转载请分割作者取得受权,非商业转载请注明出处。

退出移动版