0

So, I've made a migration of a Angular 5 project to Angular 6 (well, more like I did a mix with a regular migration and a new project re-using the files because of a bunch of problems). The project compiles and works nicely as it should.

Bu the Angular 5 version used sass instead of the regular css. That shouldn't be a problem: I did the following updates to allow Angular 6 to work with the scss files.

  • schematics in angular.json is set with "@schematics/angular:component": { "styleext": "scss" }
  • stylein angular.jsonis set with "styles": [ "src/styles.scss" ]
  • All the css files have a scss extension.
  • All the component have a scss declared instead of the css.

Well... That didn't work. My pages are rendered without style whereas the files seem to be correctly loaded. Did I miss something?

(Angular version is 6.1.10, CLI is 6.0.8)

Update 2

  • The console does not write anything related to a missing file or else.
  • The styled elements don't have their style.
  • In the DevTools the styles are not the sources tab, but they also aren't in it in the Angular 5 version (though they are in the Style Editor tab in Firefox).
Community
  • 1
  • 1
RoadEx
  • 543
  • 2
  • 12
  • check the accepted answer: https://stackoverflow.com/questions/40726081/angular-cli-from-css-to-scss/45255290 – Mahedi Sabuj Dec 20 '18 at 08:58
  • Already did all that. – RoadEx Dec 20 '18 at 08:58
  • Looks like you did everything OK. Did you change the styleUrls in your components? e.g. `styleUrls: ['./app.component.css']` to `styleUrls: ['./app.component.scss']` – benshabatnoam Dec 20 '18 at 09:28
  • Yeah, the url have been updated too. – RoadEx Dec 20 '18 at 09:39
  • We need more details to help you. Did the console wrote something? If you inspect the styled elements, do you see your styles? In chrome DevTools, source tab, do you see your styles? – benshabatnoam Dec 20 '18 at 09:43
  • Consider creating a new project using `ng new my-project`, and importing your files to it. Looks like your problem can't reproduced. – benshabatnoam Dec 20 '18 at 10:07
  • Weeeell, I did that too... And guess I'm out of luck: not working again. The thing is, if I put a simple `body { background-color : red }`, the scss work. So I don't really know why the style isn't fully working. – RoadEx Dec 20 '18 at 12:40

2 Answers2

0

You forgot to compile the scss files.

  • do npm install -g sass
  • then run sass styles.scss

which will turn/compile scss files to css one.

You cannot link a direct scss files to render styles, it must be compiled first to css.

0

Problem solved: there were missing dependencies in style and scripts in angular.json.

RoadEx
  • 543
  • 2
  • 12