Issue
I'm struggling about this but I can't figure out what is the best or the right approach to do this.
We start a project with two folders under src, app and assets.
But I need to make some .scss files to configure some styles, and don't know where do I have to put these files organized for this project, for libs like:
- Bootstrap (I'm only importing grid, container and utils classes) ex: I created a bootstrap-utils.scss file
- Angular Material custom theming that I'll have to do later. ex: I created a dir theme/..dark..light/theme.scss
- And imagine n others libs that I may have to config some styles and etc. ex: Create a toast.scss
And of course, I don't want to put all these things directly into style.scss (under src/) But I wonder how can I organize these type of files (just styles) in a correct and organized way. I can just think about libraries (Angular ones) to put all this type of things, or maybe I just can create a folder into src/ like src/styles and put everything right there?
Something like this I think?
lib/styles/src/lib/ [bootstrap, toast, custom-theme]
Or
src/styles/ [bootstrap, toast, custom-theme]
Solution
For plain CSS files that you import from libraries, you can either import them into your style sheets, or import them into you angular.json
file
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
(The ~
is used to target node modules folder)
{
"styles": [
"styles.scss",
"node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
]
}
On the other hand, if you want to write your own style and add it to your style sheets, what I like to do is to create partials and put them in a defined folder. For instance, create a folder styles
at the root and do this in angular.json
{
"styles": [
"styles.scss"
],
"stylePreprocessorOptions": {
"includePaths": ["styles"]
},
}
Now, you can create your files in this folder, for instance like this :
styles
_vars.scss
_mixins.scss
layout
_cards.scss
You name them with a leading _
to let SASS know that it is a partial, and should be only used, not compiled.
And anywhere in your application, you can use
@use "vars";
@use "layout/cards";
:host {
color: vars.$blue;
}
Finally, to better isolate my styles, I also include mixins in files, for instance _cards.scss
@mixin core {
app-card {
padding: 1rem;
background-color: white;
}
}
Then, in your style.scss
@use "layout/cards";
@include cards.core;
This ensures styles do not leak where I don't want them to.
Answered By - MGX
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.