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.

Qortex · Accepted Answer · 2018-11-12 12:37:21Z

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, 2018 at 12:37

Qortex

7,5124 gold badges46 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ashutosh · Accepted Answer · 2018-11-12 18:10:11Z

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

edited Nov 12, 2018 at 18:10

answered Nov 12, 2018 at 12:30

Ashutosh

4,69511 gold badges64 silver badges119 bronze badges

3 Comments

Qortex Over a year ago

I don't think it is required. I don't use url() in my project and it works well.

Ashutosh Over a year ago

Yes, thanks Mic, url is not necessary, but looks like styles are not being applied :(

Qortex Over a year ago

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.

Collectives™ on Stack Overflow

Cannot load css from assets in component

2 Answers 2

Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Linked

Related