Compiling SASS assets

• as writing CSS for an application can quickly become a tedious task, this project follows some opinionated guidelines (see next chapter)
• overall, structuring the main CSS file will follow this pattern:

  ├─┬─ assets/sass
  │ ├──┬─ main
  │ │  ├──── abstract: containing members (ie. functions, mixins, variables) and variables, so SASS logic
  │ │  ├──── base    : all the cascading styles building the main files, accessed globally and purely CSS logic
  │ │  └──── modules : other isolated SASS logics, have to be imported (`@use`) when needed
  │ │
  │ └──── ~

• Bootstrap customisation clean up
• distinguish old and new SASS API (ie. SASS modules and lack of Bootstrap compliancy)
• add CSS sourcemaps
• provide directory shortcut: "~" (relative to the /src/...) ; "@" (relative to the root project /, eg. for accessing node modules)

Automations

• in the same manner as NuxtJS does with its files, every components/pages/layouts of the project can have a dedicated style (just name a .sass or .scss with the same name, within the same folder)
• each style will be automatically imported to generate the main CSS file
• each style will be automatically re-writed with an import of all the main variables (ie. if we set a $green-color in the main variables, it will be accessible within the file ; other custom SASS logic, eg. in the modules folder needs to be manually added)

Scoped feature

• provide a native solution for style scope feature, such as NuxtJS or Svelte
• scope feature works extremely great with SASS + BEM

• POC opened in milestones for this scoped feature