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
- home ```
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
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.