Customize Managed .scss Files

To customize managed .scss files in the Vendora project:

The .scss files are located in the [vendora-project-directory-name/SRC-Assets/scss/] folder. This project uses gulp-sass for scss compilation.

It's recommended to add your custom scss to the custom.scss file. This avoids conflicts in future updates, which might occur if you modify app.scss or other scss files.

If you decide to fully customize the theme's SCSS, please follow this folder structure for effective management:

Folder Structure

• scss
  • components // all the components scss files are here.
  • config
    • _vendora-variables.scss // customized bootstrap variables are defined in this file
    • _variables.scss // all bootstrap variables are defined in this file
  • fonts
    • _fonts.scss // all available theme's font scss files are here.
  • icons
    • _vendora-icons.scss // all available theme's icon scss files are here.
  • layouts
    • _default.scss // default layout for theme.
  • pages
    • // each scss file under this folder is section customization for each page.
  • partials // all the partials scss files are here.
    • // each scss file under this folder is style for available include-able partials.
  • plugins // you can add the plugins scss files here.
  • sections
    • header-variations // an example of a folder for style section variations
      • _header-homepage-1.scss // an example scss file "header-homepage-1" for "header" section
      • // scss files for other variations under this folder
    • _header.scss // example of main scss file for section "header"
    • // each scss file under this folder is style for available include-able sections with with its variations.
  • app.scss // all the theme's related scss files are @import-ed in this file.
  • bootstrap.scss // all bootstrap core files are here
  • custom.scss // add customization styles here