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 的形式将样式引入并使用。