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?

I have never seen `**` used in an import, and I cannot find any documentation supporting, or opposing it. The only thing I *may* suggest is another loop denoting the sub-directories by name? However if you add/subtract sub-directories within the fonts folder, you'd have to change the sass file and re-compile -- Sort of defeating the purpose of your clean-up. — Zak, Jan 27 '21 at 23:16
@Zak - Here's a stack question with `**` in use for `import`: https://stackoverflow.com/questions/4778627/is-it-possible-to-import-a-whole-directory-in-sass-using-import — Freddy, Jan 27 '21 at 23:19
@Zak - Yeah, that has crossed my mind, was hoping there's a way to do it all in one, to avoid repetition of code — Freddy, Jan 27 '21 at 23:20
ummmm i dunno if it's right or not but what about setting each folder to the font's {$val} and replace ** with {$val} ? — Burham B. Soliman, Jan 27 '21 at 23:36
@Freddy Please let me know if my answer solved your problem. — F. Müller, Feb 06 '21 at 11:24

F. Müller · Answer 1 · 2021-02-06T07:46:56.377

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.

SASS: Search folders within folder and target all files

1 Answers1

The problem

So why does it not work?

Solution