Swiper v6 CSS not generated with Webpack in PROD builds

[julkue]

This is a (multiple allowed):

• bug

• enhancement

• feature-discussion (RFC)

• Swiper Version: v6.0.1

• Platform/Target and Browser Versions: Windows 10

What you did

I've upgraded from v5.4.5 to v6.0.1.

Expected Behavior

I changed the imports from

import Swiper from 'swiper';
import 'swiper/css/swiper.css';

to

import Swiper from 'swiper/bundle';
import 'swiper/swiper-bundle.css';

and expected it to work, since I have none of the breaking changes implemented, mentioned in the CHANGELOG.

Actual Behavior

The CSS contents is missing in my webpack build since the upgrade, without changed webpack configuration. For example this is missing:

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform; }

For compiling SASS/SCSS/CSS my Webpack configuration looks like:

      { // sass and postcss at the end
        test: /\.(scss|css)$/,
        use: [
          miniCssExtractPlugin.loader,
          {
            loader: 'css-loader'
          }, {
            loader: 'postcss-loader',
            options: {
              config: {
                path: path.join(__dirname, './postcss.config.js'),
              }
            }
          }, {
            loader: 'sass-loader',
            options: {
              sassOptions: {
                includePaths: [
                  'node_modules'
                ]
              }
            }
          }]
      }

Since the change is quite huge it's nearly impossible for me to find the related thing to this. However, what I could imagin is that since the entire bundle architecture was refactored, this may be related to Webpack's tree shaking algorithm or the sideEffects property in package.json.

What could be the issue here?

Maybe related to #3671

[julkue]

After further investigation I can now confirm the reason is "sideEffects": false in the package.json of the npm package. What was the background of this respectively why was it added? I compared this to the v5 Swiper npm package and it wasn't present there, so this is the reason for the issue here.

[julkue]

swiper/build/bundle/package.json

Line 8 in 77d72e4

"sideEffects": false

[baozi510]

I also encountered this problem

[nolimits4web]

Side effects is a must as it highly improves tree shaking.

It is related to webpack webpack/webpack#6571

For example, create-react-app has this in loaders:

{
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              }),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },

[julkue]

Since the post you've mentioned is open for over two years it's unlikely that it'll be solved soo. So, what should Swiper users do when they have a Webpack project, which for me, is like industry standard for non-libraries?

Would it be possible to specify these CSS files to have side-effects, like: webpack/webpack#6571 (comment)

[julkue]

@nolimits4web

Would it be possible to specify these CSS files to have side-effects, like (?): webpack/webpack#6571 (comment)

[Canic]

I don't know why this has been closed but here is the solution:

@nolimits4web change following to the package.json with the next update:

...
"sideEffects": ["*.scss", "*.less", "*.css"],
...

so stylesheet has sideEffects

or for @julmot
in your webpack config:

{
  test: /\.(scss|css)$/,
  sideEffects: true,
  use: [
    ....your_loaders...
  ]
  ......
}

Important here is sideEffects: true
But first fix would be the right way.