He utilizado Vuejs, EDBoilerplate, Boilerplates con gulp o webpack, Reactjs y he notado que en todas ellas se puede implementar de forma rápida y eficiente SMACSS separando toda la arquitectura de mi CSS en sus propio scafold como en la siguiente imagen.

Mi duda surge en como poder implementar esta separación en Angular 4 - 7, quiero separar todo en esa carpeta

Supongamos que lo siguiente es mi scafold de mi app de angular quiero poder hacer lo que está resaltado

. angular-project +-- src | +-- components | +-- services | +-- pipes | +-- scss | +----- base | +----- components | +----- layout | +----- styles.scss +-- index.html

No sé si la respuesta sea obvia, en Vuejs no sabía como configurarlo hasta que noté que unicamente tenia que instalar el loader de sass en el proyecto y en el main.js solo necesité poner un require(./scss/styles.sccs) para que se pudiera compilar a la hora de hacer SCSS.

No busco usar Sass dentro mi mi propio componente como está acostumbrado, busco separar el CSS de la logica y la maqueta como lo hacemos en Angular comunmente por cuestiones del proyecto.

De antemano gracias.