Ionic CLI ver 5.2.3, how to watch SASS?

Ionic Framework ionic-v3
1

Hi, I’m still learning Ionic 4 as I go. I created an Ionic 4 React project using the Ionic CLI (i.e. ionic start projectname --type=react ).

I manage to style my component using custom css files. My next step is to utilize scss so that Ionic serve will watch my scss file changes and hot reload them. I see that ionic cli already install node-sass but there is no info about how to watch them.

My online search lead me to information about “ionic setup sass” command but it’s not supported by the latest Ionic CLI.

Thanks!

2

So… this is unexpected. In my component, instead of import css file, I can now import scss file and work directly with scss file: import '../theme/LogIn.scss';

I wonder what will happen during deployment, but that’s a concern I will have to deal with down the road.

3

Hice you don’t do any extra step?? Because is not working for me

4

I have my components in a “pages” folder, and the sass file in a “theme” folder. I found that some of the quirk has to do with how you set up your boilerplate and folder structures, and of courses these are the kind of stuff that Ionic documentation never explain. If you get stuck, use the “Ionic React Conference App” sample as reference, even copy their folder structures.

5

@Casal0x In my case I installed node-sass and it worked as said @MosesOng …

I wonder if you know a way to have a main style file and import other style files into it and just process the main file at moment of build process.

Thank you in advance!