1

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!

Improve this question
Related questions
1
How to use SCSS mixins in angular component.scss file?
1
Why is my custom Angular SCSS import failing?
1
Angular modules are not taking global styles and scss variables
Load 5 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.