Angular Universal (SSR) 'Rules skipped due to selector errors'

Question

Reproduction steps:

ng new testproject --style scss
cd testproject
ng add @ng-bootstrap/ng-bootstrap
npm run build

It's not necessarily ng-bootstrap, it can be bootstrap or tailwind, basically any scss framework.

Error looks like:

1 rules skipped due to selector errors:
  legend+* -> Cannot read properties of undefined (reading 'type')

This error goes on build or serve ssr; dev and prod.

Answer 1

This issue is can be solved with the following code in angular.json

"optimization": {
    "scripts": true,
    "styles": {
        "minify": true,
        "inlineCritical": false
    }
}

The section needs to be added in architect > build > configurations > production section.

BUT, if you'r using ssr it'll not work, because ssr builds in runtime. So you dont need the config in angular.json, you have to do it in your server.js, disabling it.

ngExpressEngine({
    bootstrap: AppServerModule,
    inlineCriticalCss: false,
})