How to create and use SCSS files module-wise in an Angular NX application?

I am building a theme-based Angular application using the Nx Framework, and I am trying to organize styles in a modular fashion for better scalability and maintainability.

Here’s my scenario:

I have predefined SASS variables and mixins in a separate file (e.g., _variables.scss and _mixins.scss, Color, typography) shared across the application. I have modules such as:Home,Tools,Settings,Interface

For each module, I have created separate SCSS files to handle their specific styles: home.scss, tools.scss, settings.scss, interface.scss

Currently, I have a global style.The SCSS file includes the common styles and predefined variables/mixins.

My goal is:

• To load and use the SCSS files (home.scss, tools.scss, etc.) only within their respective modules, without affecting the global styles.scss.
• To make sure the predefined SASS variables and mixins are still accessible within these module-specific SCSS files.
• To ensure that the styles are encapsulated and do not bleed into other modules.

Any examples, suggestions, or insights would be greatly appreciated. Thank you!

Continue reading...