html - SASS: Search folders within folder and target all files

Question

I previously had the following folder structure for fonts:

theme
  assets
    src
      fonts
        font-bold.eot
        font-bold.svg
        font-bold.otf
        font-bold.woff
        font-bold.woff2
        font-bold.ttf
        font-medium.eot
        ...

However, now I want to clean up the fonts folder, so have now got the following:

theme
  assets
    src
      fonts
        font-bold
          font-bold.eot
          font-bold.svg
          font-bold.otf
          font-bold.woff
          font-bold.woff2
          font-bold.ttf
        font-medium
          font-medium.eot
          ...

I have basically grouped the fonts into folders.

Now, in my font-face, I'm trying to search through each folder and generate the font family, but I'm currently a 404 error, full message:

/theme/assets/fonts/**/ net::ERR_ABORTED 404 (Not Found)

@each $key, $val in $font-families {
  @font-face {
    font-family: #{$key};
    src:  url('../../fonts/**/#{$val}.eot');
    src:  url('../../fonts/**/#{$val}.eot?#iefix') format('embedded-opentype'),
          url('../../fonts/**/#{$val}.woff') format('woff'),
          url('../../fonts/**/#{$val}.woff2') format('woff2'),
          url('../../fonts/**/#{$val}.ttf') format('truetype'),
          url('../../fonts/**/#{$val}.svg#sansationregular') format('svg');
    font-style: normal;
    font-display: swap;
  }
}

Does ** not work in this sense as it does when importing files? or am I missing something?

Edit:

I have the following set-up in my mixin:

$font-families: (
  'lemonmilk-regular': 'lemonmilk-regular/lemonmilk-regular',
  'lemonmilk-light': 'lemonmilk-light/lemonmilk-light',
  'lemonmilk-medium': 'lemonmilk-medium/lemonmilk-medium',
  'lemonmilk-bold': 'lemonmilk-bold/lemonmilk-bold',
);

@each $key, $val in $font-families {
  @font-face {
    font-family: #{$key};
    src:  url('../../fonts/#{$val}.eot');
    src:  url('../../fonts/#{$val}.eot?#iefix') format('embedded-opentype'),
          url('../../fonts/#{$val}.woff') format('woff'),
          url('../../fonts/#{$val}.woff2') format('woff2'),
          url('../../fonts/#{$val}.ttf') format('truetype'),
          url('../../fonts/#{$val}.svg#sansationregular') format('svg');
    font-style: normal;
    font-display: swap;
  }
}

Some of fonts seem to be showing up on the front end, but I also get a batch of 404 errors on the font files even though they exist?

question from:https://stackoverflow.com/questions/65928741/sass-search-folders-within-folder-and-target-all-files

Answer 1

The problem

I have recreated your structure above. The problem is, that your path is wrong.

In the example above you use /assets/src/fonts/ but further down the post (in the screenshot with the 404's) you use /assets/fonts/ this is already the problem here.

So why does it not work?

Because the path that the compiled css uses is based on the directory it sits in, therefore ./css. So If you have your main.css file in the folder ./css then ../ will refer to the root of the project ./. And from the root there is only a theme folder to look for and no assets nor fonts folders are present on this level.

Solution

All you have to do is to change all your paths to:

url('../theme/assets/src/fonts/#{$val}.eot'); /* adjust the file ending ofc. */

You can also improve your mixin by using a variable or constant for the fonts-directory.

$font-families: (
  'lemonmilk-regular': 'lemonmilk-regular/lemonmilk-regular',
  'lemonmilk-light': 'lemonmilk-light/lemonmilk-light',
  'lemonmilk-medium': 'lemonmilk-medium/lemonmilk-medium',
  'lemonmilk-bold': 'lemonmilk-bold/lemonmilk-bold',
);

$fontsDir: '../theme/assets/src/fonts/';

@each $fontFamily, $fontName in $font-families {
  @font-face {
    font-family: #{$fontFamily};
    src:  url('#{fontsDir}#{$fontName}.eot');
    src:  url('#{fontsDir}#{$fontName}.eot?#iefix') format('embedded-opentype'),
          url('#{fontsDir}#{$fontName}.woff') format('woff'),
          url('#{fontsDir}#{$fontName}.woff2') format('woff2'),
          url('#{fontsDir}#{$fontName}.ttf') format('truetype'),
          url('#{fontsDir}#{$fontName}.svg#sansationregular') format('svg');
    font-style: normal;
    font-display: swap;
  }
}

... and there you go. It works like a charm.