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.

score 4 · Accepted Answer · answered Nov 12 '18 at 12:37

4

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';

answered Nov 12 '18 at 12:37

Qortex

Ashutosh · Answer 2 · 2018-11-12T18:10:11.763

-1

Found the answer in this thread:

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';

edited Nov 12 '18 at 18:10

answered Nov 12 '18 at 12:30

Ashutosh

I don't think it is required. I don't use `url()` in my project and it works well. – Qortex Nov 12 '18 at 12:33
Yes, thanks Mic, url is not necessary, but looks like styles are not being applied :( – Ashutosh Nov 12 '18 at 17:26
Seems weird. Try doing syntax error in the css and see what happens in the browser and compiler. Also, look for styles in the browser to see where they appear. They are most likely there, but maybe something in the HTML prevents them from being applied. – Qortex Nov 12 '18 at 18:05

2 Answers2