Hi everyone I m working…

Hi everyone, I’m working on a new application and I’m curious if there is a recommended location to put variables.scss that will apply to many different libraries? I was thinking it would probably make the most sense to put it in apps/ui/src/app/variables.scss but I’m unsure if I should make a separate library for a stylesheet

Currently I have the following. ```-apps

• ui
  • src
    • app
      • components
      • theme
        -libs
• common
  • components
• routes
  • home ```

Responses:

I have theme setup for the actual handling of switching themes and wrapping my app with a theme component. The styles I’m wondering where to put are a more global variables such as font sizes, font family, gutter size, etc. I don’t think those would be part of a color theme

Good point. When I said theme, i was thinking about multiple styles options. Not only colors. I am thinking about padding, font size, layout, etc. I am gonna try to encapsulate all these styles into a theme that i can easily extend or change. If it is more global variables, it is really up to the dev. I know angular has a style.css at the root of the project. I put my globals there.

Since we are using nx, maybe nx’s root folder. Wanna see what the channel thinks.

I am now interested since I will be changing how i s style my project.

For now I stuck it where I mentioned. I broke it out to _variables.scss , _palette.scss and _mixins.scss where palette.scss is the color variables passed into the theme

i re-read your post, and making a library wouldnt be a bad idea. Maybe an overkill for some projects, but if we look at angular material, @angular/material is a library. primeng is another example. The thing is that they export UI components. So we are where we started.

the articles channel has a post about styles. just shared about it. https://indepth.dev/how-to-set-up-an-nx-style-monorepo-workspace-with-the-angular-cli-part-5/

This article explains how to extract shared styles workspace libraries: https://indepth.dev/tiny-angular-application-projects-in-nx-workspaces/

If you want to share Sass partials between projects, add entrypoint files in the src folder next to index.scss. Then add stylePreprocessorOptions.includePaths to the projects that need them.

Great article

Thanks