Where to put fonts using SCSS 7-1 architecture?

Question

I am currently restructuring my project using the 7-1 architecture as proposed in https://sass-guidelin.es/#architecture.

Now, i am using flaticons in my project. Where in the structure should i put the folder and scss file provided by flaticon, and where should i import it?

Answer 1

The 7-1 pattern lists the following sub-directories along with main.scss:

./
  base/
  components/
  layout/
  pages/
  themes/
  abstracts/
  vendors/
  main.scss

---

Where to place external library/framework scss

The vendors folder is meant for SCSS of external libraries/frameworks like _flaticons.scss

If flaticons is a directory with many things rather than a single file, then you can just place the whole flaticons directory in the vendor's folder.

---

Import

In main.scss in the sass-root directory: @import 'vendors/flaticons';

or the following if your stuff is in a directory: @import 'vendors/flaticons-directory/flaticons-main-file'

---

Be mindful of the ordering of imports in main.scss because it's possible to define general variables and mixins in one file, and refer to them in other files, so the files that define them must be imported before the files that use them.

Additionally, the SASS will be compiled to CSS rules in the same order that they are imported, so the normal inheritance / cascading will apply to the compiled CSS rules.