CSS imports disappear in webpack 5 production builds when sideEffects is omitted

Short answer

Webpack 5 treats an omitted sideEffects field in package.json as true – it assumes the module can have side effects. Therefore CSS imports are preserved during production‑mode tree‑shaking unless a sideEffects: false declaration is present somewhere in the build.

Why the default matters

• CSS imports inject styles into the DOM; dropping them would break the UI.
• The tree‑shaker removes modules that are deemed pure. With sideEffects: true (or omitted), modules are kept.
• Only when sideEffects is set to false (or an empty array) does the optimizer treat the module as pure and strip it out if unused.

Common causes of missing CSS in production

1. Explicit sideEffects: false in your own package.json or in a dependency’s package.json.
2. Project‑level optimization.sideEffects: false in webpack.config.js.
3. Plugins that aggressively remove unused CSS (e.g., PurgeCSS) misconfigured to treat all imports as unused.

Steps to verify and fix this case

1. Check your own package.json: look for a line like \"sideEffects\": false. If present, change it to \"sideEffects\": true or remove the field to restore the default behaviour.
2. Inspect dependencies: search node_modules for package.json files containing \"sideEffects\": false. If a library you import has this flag, consider upgrading, patching, or adding a sideEffects: [\"*.css\"] whitelist in your own config to preserve CSS files.
3. Temporarily enable side‑effects in the config:

   module.exports = {
     mode: 'production',
     optimization: {
       sideEffects: true
     }
   };
   

   Rebuild and check if the CSS assets appear. If they do, the issue was a sideEffects mis‑declaration.
4. Use a bundle analyzer: run webpack-bundle-analyzer or generate a stats.json to see whether CSS files or style-loader chunks are present. Missing entries confirm that CSS was removed.

What to ask next?

Is there an explicit sideEffects: false line in your own package.json or in any dependency you import? That detail will determine whether the recommendation changes.

Trade‑offs

• Assuming all modules have side effects (default): preserves CSS but may keep unused modules, slightly increasing bundle size.
• Explicitly marking modules as side‑effect‑free: can shrink bundles but risks dropping essential CSS or JavaScript that mutates global state.

Bottom line

With Webpack 5, you don’t need to set sideEffects to preserve CSS. If styles disappear in production, check for an explicit sideEffects: false in your own package.json or any dependency, or for an overriding optimization.sideEffects: false in the build config. Correcting that will restore the styles while maintaining tree‑shaking benefits.