I’m starting a project with Ionic 3, and I want to structure it using a folder-by-feature structure instead of the default Ionic structure. E.g. I’ll have a “login” folder that will contain all the pages and components for the authentication.
I have some styles that can be used in different components and pages inside this login feature, so I created a file “login/theme/styles.scss”. However, the Ionic building tool is ignoring this file. I can only define styles if they’re bound to a certain page or component.
Is there any way to tell the builder that I want to use other files so those styles are included in the main.css file?
I’m still investigating this. I discovered I can configure a bit the sass process by using a custom config based on the default one.
Of all the possible config options, I think the only one that can work for me is variableSassFiles. If I enter the whole path of one of my scss files, then it’s included in the built CSS file. I’d like it to be included at the end of the CSS file, but I guess I’ll have to stick with this.
However, I wasn’t able to make it work using regular expressions (I’ll have a scss file per feature, so I don’t want to include all the paths). I tried several options:
/{{SRC}}\/core\/[^\.]\.scss/
new RegExp(’{{SRC}}/core/[^\.]\.scss’)
/theme\/styles\.scss/
I don’t know how to debug this process. I tried adding some console.log to the sass script in the node_modules/@ionic folder, but I cannot see them in the console when running “ionic serve”. Can I run only the sass process and see the log?