Angular 12 - after update inserted CSS style block ahead of styles.css (bootstrap??) is breaking responsiveness

Question

After upgrading to Angular 12 (12.2.1) from 11 I am getting an injected style block right before my style sheet link

<style>
@charset "UTF-8";@import url(https://fonts.googleapis.com/css?family=Open+Sans);
:root{
--blue:#007bff;
--a bunch of color variables --
line-height:1.5;color:#212529;
text-align:left;background-color:#fff;}
img{border-style:none;}
img{vertical-align:middle;}
img{page-break-inside:avoid;}
@page {size:a3;}
body{min-width:992px!important;}
</style>

<link rel="stylesheet" href="styles.645853d3825cd77dedab.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.645853d3825cd77dedab.css"></noscript>

</head>

That last line (body) is breaking the responsiveness of my pages.

This is only on ng build, it does not appear locally on ng serve. I can not figure out where it is coming from or what module is responsible for making this injection. I am using ng-bootstrap 10 but downgrading it to previous version does not affect the above code block.

bikeguy · Accepted Answer · 2021-09-21 17:51:40Z

2

Fixed with the answer here: https://stackoverflow.com/a/67582075/382281

just add inclineCritical: false to your angular.json file the particular build.

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

answered Sep 21, 2021 at 17:51

bikeguy

3111 gold badge3 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 12 - after update inserted CSS style block ahead of styles.css (bootstrap??) is breaking responsiveness

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related