sideEffects: false causes imported SCSS file to be optimized away by Webpack 4+

[jaydiablo]

I'm importing the SCSS file for this component in the JS of my app like so:

import 'angular-notifier/styles.scss';

Which works fine, until a production build is done. This component's package.json file has this line in it:

"sideEffects": false,

Which tells Webpack 4 that if there are unused imports, they can be optimized away (tree shaken: https://webpack.js.org/guides/tree-shaking/), and since this SCSS file isn't exported or used in the app directly, Webpack just removes the import during the production build.

There might be something I can do in the app to prevent this from happening (import to a variable and export that maybe, or override that sideEffects setting locally (not sure if that's possible, but going to try)), but I think the better solution is for this component to change the sideEffects property in the dist package.json to something like this:

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

Which would allow any consumers of this component to import the CSS/SCSS files in Webpack and not have them tree-shaken away.

I'm using version 6.0.1 of this component, but I suspect that this issue applies to all versions.

This Github issue in the webpack project explains the issue well, and shows the fix for a different library that exhibited the same issue: webpack/webpack#8814

Thanks!

[itsdevdom]

Released with 6.0.2.