Any practical modern web application will be built with a mix of stylesheet code, both global stylesheet code and component-specific style code.
Bellevue offers a full-featured, preconfigured architecture for architecturing (S)CSS code in a scalable way. This architecture is easy to streamline if you feel your project needs this, but it's probably better to leave it in place as it's still fairly easy to navigate.
└── src/ └── styles/ // Global base styling and style utilities ├── base/ ├── definitions/ ├── constants.scss ├── functions.scss ├── keyframes/ ├── mixins/ ├── normalize/ ├── toolchain/ ├── transitions/ ├── utilities-base/ ├── utilities-composed/ ├── vendor/ ├── vendor-overrides/ ├── webfonts/ ├── global.scss // All global base styling ├── shared.scss // All SCSS constants and mixins └── utilities.scss // All global CSS utilities
utilities.scss are imported by
Known issue: it is difficult to control the exact order that stylesheets are injected into
index.html in Webpack.
utilities.scss are currently injected before component styles, but they should be injected after component styles to be more effective and reduce the need for overqualified selectors.
Components are written as
.vue files, which include a
<style> tag for writing component styles.
<style scoped> is not used, as this will break the cascade. If you've traditionally had troubles with the cascade though, and are not interested in overwriting child component styles per context, you might want to use
scoped in your components.
Sharing SCSS tools
In both global and component styles, you can import any SCSS mixins and constants you need. The easiest way to do this is to simply import the shared styles like this:
// `@shared-styles` is an aliased defined in src/config/config.aliases.js @import '~@shared-styles';
Notice that this does not result in any new CSS output.
shared.scss only imports mixins and constants.
Commonly accessed variables in SCSS are set in
constants.scss. These are also automatically exposed to JS when
@config is imported.