Pagination component SCSS not included in production build

This is a (multiple allowed):

• bug

• enhancement

• feature-discussion (RFC)

• Swiper Version: 3.1.2

• Platform/Target and Browser Versions: macOS FIrefox + Chrome

What you did

Included Swiper (React) along with pagination:

import SwiperCore, { Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.scss';
import 'swiper/components/pagination/pagination.scss';

Expected Behavior

Swiper slides and pagination bullets should be styled in the production build.

Actual Behavior

Swiper slides have styles (since the sideEffects fix in 6.1.0) but pagination bullets do not have any style rules. Issue only appears in production build; development is fine.

Seems to be related to #3734 / #3708, but only with the optional components.

My first thought is that the sideEffects aren’t matching nested directories. I tried editing the sideEffects section of swiper’s package.json from e.g. *.scss to **/*.scss, but that didn’t seem to work.

Possible workaround: if I remove the scss imports from my .jsx file and move them into my .scss file (e.g. @import '~swiper/components/pagination/pagination.scss'), it seems to work. But importing them in jsx should work too.

[johnbede2000]

Using require instead of import is another quick workaround, works for me

[xughv]

The cause of the issue is this sideEffects.