CSS styles are combined and included at the beginning of the index.html file

Question

CSS styles are combined and included at the beginning of the index.html file

During the creation of a production version of my Angular 9.0.4 application, I noticed that the CSS is bundled and placed at the top of the dist/index.html file as shown below:

<link rel="stylesheet" href="styles.6ea28d52542acb20a4c6.css"><!doctype html>
<html lang="en>

<head>
  <meta charset="utf-8">
  <title>MyTitle</title>
  <base href="/">

This seems to be triggering a warning in Chrome:

Resource interpreted as Stylesheet but transferred with MIME type text/html:

As a result, the stylesheet is not rendering correctly. It's worth noting that this issue occurs only when navigating to URLs with subfolders such as www.mydomain.com/product/1.

Is there a way to adjust the build configuration so that the stylesheet element is inserted after the <base href="/"> tag? This adjustment could potentially resolve the warning message.

css angular

Answer 1

Answer №1

Is there a way to relocate the import of the css file? I'm not sure, but you can prevent this error by disabling css extraction:

Try running yarn build with the flag --extractCss=false

Alternatively, you can also disable css extraction in your build configurations within angular.json file

{
 ...
 "build": {
  "configurations": {
    "yourBuildName": {
      ...
      "extractCss": false
    }
  }
 }
}

Answer 2

Is there a way to relocate the import of the css file? I'm not sure, but you can prevent this error by disabling css extraction:

Try running yarn build with the flag --extractCss=false

Alternatively, you can also disable css extraction in your build configurations within angular.json file

{
 ...
 "build": {
  "configurations": {
    "yourBuildName": {
      ...
      "extractCss": false
    }
  }
 }
}

CSS styles are combined and included at the beginning of the index.html file

Answer №1

Similar questions

I'm trying to access my navigation bar, but for some reason, it's not allowing me to do so

Designing a layout for a chat application that is structured from the bottom up

Reach out to the property via phone if it is listed in the JSON

Encountering the "Unrecognized teardown 1" error when subscribing to an Observable in Typescript and Angular2

Different Option for Single-spa

A helpful tip for creating line breaks within a Vue JS v-for loop using CSS

Tips for creating a test scenario in Jest for managing the delay introduced by rxjs when making consecutive API calls

Tips for showcasing unique keywords in Ace Editor within the Angular framework

How to use bootstrap to resize and center a div element

A Guide to Launching the Angular 2 Quick Start Project on a Linux (CentOs) System

Sometimes the Navbar options fail to show up consistently on the Navbar bar

converting HTML values to TypeScript

Conceal an element along with its space, then signal the application to show alternative content using React

The Elusive Glitch: IOS Encounter with Ionic 2

What is the best strategy for positioning an anchor element within a list item using JSX or Bootstrap in a way that maximizes efficiency?

How to create interactive SVG animations on hover

SVGs are not resizing correctly in Internet Explorer and there is unnecessary blank space around them

Resolving Uncaught TypeError in React when trying to read properties of undefined (specifically 'map')

Having trouble selecting content in an HTML document using Xpath and response.css with Scrapy?

What steps should I follow to have my edit form component extract values from HTML in Angular?