Search code examples
cssreactjssassproject-structuredirectory-structure

Import SCSS file with font url into different scss files with different folders level

I have a Global scss file that have a font-face:

@font-face {
  font-family: "My Font";
  src: url("../../fonts/my-font.ttf");
}

This Global.scss file is imported from different scss files, some of these files are on the same level as the Global file so they can read the font file using "../../fonts/my-font.ttf" but some are one level below and can only access the font file with this ref: "../../../fonts/my-font.ttf"

What is the best solution here that is not considered a workaround?

Thanks

Solution

  • Font url makes no sense for Sass, it is only resolved by browser when font is being loaded. So the only requirement for you is to have correct url for font relative to CSS, not SCSS.

    You can, for example, use absolute url (starting from /) if it is acceptable solution.