Add component level styles instead of global styles in angular

Question

I am using an angular template argon dashboard in my angular app and I moved all the template files to a separate module named dashboard module. Since I'm using different global styles in my project, to prevent style collisions, I imported the template styles in the dashboard module components.

dashboard.componenet.scss

@import ' "src/assets/templates/argon-design-system/scss/argon.scss",'

And I added dashboard.componenet.scss file in the styleUrls[] array in all the template modules.

navbar.component.ts

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss', '../../dashboard.component.scss']
})
export class NavbarComponent implements OnInit {
}

By doing this, I can see that most of the scss files being loaded and some not. So the dashboard doesn't render as expected. But when I add the URL src/assets/templates/argon-design-system/scss/argon.scss in the angular.json global styles everything works properly.

What am I doing wrong here?

Thanks,

why don't you import the scss file into styles.scss file. You don't have to add dashboard.scss on every component. — uiTeam324
@uiTeam324 as I mentioned "Im using different global styles in my project". If I import it in styles.scss it gonna collide with other styles in my project. — dahamv

CJOSEPH CJOSEPH · Accepted Answer · 2020-11-24T06:16:31

I would say import it in navbar.component.scss instead since it keeps the style within the component.

Add component level styles instead of global styles in angular

1 Answers