背景
之前项目中遇到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 的形式将样式引入并使用。