Cannot load css from assets in component

Question

I am new to Angular 6 and trying to use my css files in a particular component.

My angular.json file says this:

"angapp": {
  "root": "",
  "sourceRoot": "src",
  ....

My css files are placed under src/assets/css directory. I have a component named dashboard.component.ts in

src/app/components/secure/dasbhoard

I am trying to include file src/assets/css/sidebar-nav.min.css in following ways but could not:

@Component({
  selector: 'dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['src/assets/css/sidebar-nav.min.css']
})

or

@Component({
  selector: 'dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['/src/assets/css/sidebar-nav.min.css']
})

or

@Component({
  selector: 'dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['/assets/css/sidebar-nav.min.css']
})

or

@Component({
  selector: 'dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})

and tried to import css in dashboard.component.css

@import '/src/assets/css/sidebar-nav.min.css';

None of the above is working. I get the error:

Module not found: Error: Can't resolve './src/assets/css/sidebar-nav.min.css' 

The file does exist in: ..../src/app/components/secure/dashboard

I think I am missing path from the root directory.

Answer 1

Found the answer in this thread:

Angular 6 - How to apply external css stylesheet (leaflet) at component level?

Imported css like this:

@import url('src/assets/css/sidebar-nav.min.css');

url() is not required, the actual statement should be:

@import 'src/assets/css/sidebar-nav.min.css';

Answer 2

Absolute path in styleUrls is not trivial, as documented here.

You can still use relative path though : ../../../etc.

Going with @import in your scss is another solution indeed, and you can just use:

@import 'src/assets/css/sidebar-nav.min.css';