When you are working with Sass partials, it's often useful to create a directory to organize the different layers of partials that make up your custom CSS. We can do this by simply creating a styles directory and moving our partials inside it. For example, if we moved our colors partial to /src/styles/variables/_colors.scss, we can import it into our /src/styles.scss root file just by updating our import path:
@import "styles/variables/colors";
With our styles now moved out of our root directory, we can continue to add more partials to organize any other variables or configuration that we might need. As long as we import them in our styles.scss file before we reference them, we can rely on them being available.
{
...
"apps": [
...
"styles": [
"styles.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"styles/variables"
]
},
...
This change will allow all our Sass files, including component Sass files, to import this color partially by just importing it by its partial name, @import "colors". This is a very handy way to use shared Sass variables and partials with Component Styles in Angular.
Now that we know about how to work with Sass partials, we can apply these skills to leverage Sass-based CSS frameworks, such as Bootstrap 4.