5
votes

Does anyone know how to solve the 404 file not found for a .scss on a component :

enter image description here

this is my .ts file

I would assume this is how you connect your styling the .scss and the .ts is in the same calendar/ directory

@Component({
  selector: 'calendar',
  styleUrls: **['calendar.component.scss']**,
  templateUrl: 'calendar.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})

Has anyone else stumbled upon this issue. I have tried :

styleUrls: ['calendar.component.scss'], styleUrls: ['./calendar.component.scss'], also :

in the app.scss, like so :

@import '../components/calendar/calendar'
@import '../components/calendar/calendar/calender.component.scss'

all attempts are unsuccessful. Any thoughts?

1
Which version of Ionic? Normally you don't have to specify the link to the scss file if it is in same folder with same name. I would remove all link references and check if it is matching in terms of name / selector.' - August
Actually removing the link kinda works for me. Thanks @Aug - Sampgun
@Sampgun I'm glad if I could help. - August
Isn't there a way to compile the SCSSs in Angular way? I have to import an Angular 5 app in Ionic and it's driving me crazy. - Sampgun

1 Answers

2
votes

Ionic 4:

Seems the actual styleUrls is a little bugged for relative paths. Change styleUrls with styles for example:

styles: ['favourites.scss'],