CODEWITHSUNDEEP
cssangular
Rafi
Rafi

Reputation: 1036

How to import stylesheet in angular with id attribute?

I'm trying to integrate a bootstrap dashboard template into an Angular8 project. but I'm getting the resource not found error when I link the css file in index.html,

  <link rel="stylesheet" href="./src/assets/css/theme.min.css" id="stylesheetLight">
  <link rel="stylesheet" href="./src/assets/css/theme-dark.min.css" id="stylesheetDark">

In my template they used an id attribute in each stylesheet. Because of this id attribute (id="stylesheetLight"), I'm not able to import it into; neither style.css nor angular.json. And without specifying the id, the design will be broken.

The error I'm getting when I import in index.html: enter image description here

How can solve the resource not found error? Or is there any way that I can specify the id in style.css as @import ?

Upvotes: 0

Views: 1219

Answers (3)

bullet888
bullet888

Reputation: 13

I have the same problem, reason why I want to add id is because i want to do this from https://material.angular.io/guide/theming

<link id="themeAsset" rel="stylesheet" href="/path/to/my/theme-name.css">

function changeTheme(themeName) {
  document.getElementById('themeAsset').href = `/path/to/my/${themeName}.css`;
}

so i could change style for whole app styles by click instead of adding classes to every component

Upvotes: 1

StepUp
StepUp

Reputation: 38094

You can create a stylesheet, e.g. "shared.css", and add it to angular.json file:

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/shared.css"
        ],

and use your styles conditionally:

[class.my-class]="foo=='light'"

Upvotes: 0

Adrita Sharma
Adrita Sharma

Reputation: 22213

You have to add it in angular.json file:

"options": {
  ...
  "styles": [
    "src/styles.css",
    "src/assets/css/theme.min.css"
    "src/assets/css/theme-dark.min.css"
  ],
  "scripts": [],
  "assets": [
    ...
  ]
}

In Angular, adding style sheet like <link rel="stylesheet" href="./src/assets/css/theme.min.css" id="stylesheetLight"> isn't the correct way

Upvotes: 2

Related Questions