In our Angular application generated with angular-cli, we are utilizing various global styles and imports defined in the styles.scss file (which begins with
/* You can add global styles to this file, and also import other style files */However, upon adding this line at the top of the file:
@import '~@company/company-wide-styles'
we noticed that the webpack builds started producing bundles that were several megabytes in size. The imported css file is 1120 lines long (compiled, unminified).
It is worth mentioning that we have ejected the configuration as we need to customize certain settings that were not supported by angular-cli yet. The ejections were done using the following commands:
ng eject --aot -e dev -dev
ng eject --aot -e prod -prod
and then the configuration files were utilized in the respective builds.
We are puzzled as to what could be causing these excessively large file sizes. With the inclusion of the import line, the build files are at least doubled in size!
The company wide styles are obtained via yarn from a local registry set up with artifactory, however they exist in the node_modules just like any other package, so we don't believe that's contributing to the issue.