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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With