Reply To: CSS issues preventing builds

[aconley]

Peter,
I don’t get the errors when building for development, but when ng build runs against the production configuration, it finds those errors in the stylesheets.
All I have to look at is the NPM package. For example, if I open node_module/smart-webcomponents-angular/source/styles/components/smart.fileupload.css, I can see that the @-webkit-keyframes error styles only have 5 characters in their background-color definitions, which is invalid. Looking at the corresponding source/styles/default/scss/smart.fileupload.scss file, the colors are defined in RGBA format, but whatever processor you use to build the CSS file is converting the RGBA format (#ff000015) to some sort of short hex notation for the first 6 characters (#f00) with the alpha added to the end (#f0015).
You can pretty easily reproduce this:
ng new smarttest
cd smarttest
ng add smart-webcomponents-angular
ng build
You’ll have to increase the budget size in angular.json from 1mb to something like 3mb because the smart.default.css file is so big. If you build again after fixing the budget, you should see something like the following error:
× Index html generation failed.
undefined:1:727615: missing '{'
In my case, that location was the progressbar keyframes problem. I manually fixed that, then built again, found the next problem.