Best Practice for organizing SASS (vendor vs main including overrides

Interested in how other projects are organizing their SASS/SCSS for their projects.

In my project, I have some SCSS overrides/imports for ionic vars and mixins. I also have my custom SCSS for the project.

I was thinking of a structure such as


  • vendor/ (includes the scss that overrides ionic scss; imports ionic scss)
  • module/ (includes individual scss files that do NOT require ionic to be imported)

then during compilation, the files in vendor would be compiled/minified to vendor.css, and main to main.css

I dont really like the idea of having a vendor.css file that contains BOTH ionic product scss AND ionic scss overrides, so im interested in seeing what others do.

Is there a way I could import the ionic scss and be able to override the scss WITHOUT having it compiled to the vendor.css?? That way I could have the ionic product scss and overrides separate.