Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ionic React v5: Configure Project to Process Sass/Scss Files

I've create a test application with Ionic v5 w/React and I don't see any specifics in the documentation on how to configure Sass preprocessing. I have a couple sass files in the project structure, but they don't seem to be loading or being processed for that matter. I added node-sass to the package.json. Any help would be much appreciated. I used the Ionic Cli to created a blank app and added some .scss files to the project dir.

like image 625
Joseph Freeman Avatar asked Feb 18 '20 18:02

Joseph Freeman


2 Answers

So I figured it out. Turns that ionic looks at the themes directory for all style sheets, including scss sheets. So I simply place my scss files there, ran ionic serve and imported the base style sheet, import '/theme/styles.scss' into the "main" component and it worked. I could run ionic build command see that the scss files were processed and minified into a .css file.

like image 84
Joseph Freeman Avatar answered Oct 17 '22 14:10

Joseph Freeman


So just to make it clear that you do need to install node-sass via npm or yarn in order for Ionic to support scss files after that you can change any files whether it’s inside pages or components or theme folder and you just have to update the import to scss instead of css

Command for Installation npm install --save-dev node-sass

Import changes enter image description here

like image 8
Siddharth Pandey Avatar answered Oct 17 '22 14:10

Siddharth Pandey