SASS：在文件夹中搜索文件夹并定位所有文件答案

【问题标题】：SASS: Search folders within folder and target all filesSASS：在文件夹中搜索文件夹并定位所有文件
【发布时间】：2021-05-01 20:29:47
【问题描述】：

我之前有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
        ...

但是，现在我想清理fonts 文件夹，所以现在得到了以下内容：

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
          ...

我基本上已经将字体分组到文件夹中了。

现在，在我的font-face 中，我正在尝试搜索每个文件夹并生成字体系列，但我目前出现 404 错误，完整消息：

/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;
  }
}

** 在这个意义上是不是像 importing 文件时那样工作？还是我错过了什么？

编辑：

我的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;
  }
}

有些字体似乎出现在前端，但我在字体文件上也收到了一批 404 错误，即使它们存在？

【问题讨论】：

我从未见过** 在导入中使用，我找不到任何支持或反对它的文档。我可能建议的唯一一件事是另一个按名称表示子目录的循环？但是，如果您在字体文件夹中添加/减去子目录，则必须更改 sass 文件并重新编译——有点违背了清理的目的。
@Zak - 这是一个堆栈问题，** 用于import：stackoverflow.com/questions/4778627/…
@Zak - 是的，我想到了，希望有一种方法可以一次性完成所有操作，以避免重复代码
嗯，我不知道它是否正确，但是如何将每个文件夹设置为字体的 {$val} 并将 ** 替换为 {$val} ？
@Freddy 如果我的回答解决了您的问题，请告诉我。

标签： html css sass font-face

【解决方案1】：

问题

我在上面重新创建了您的结构。问题是，你的路径是错误的。

在上面的示例中，您使用 /assets/src/fonts/，但在帖子的下方（在带有 404 的屏幕截图中）您使用 /assets/fonts/，这已经是这里的问题了。

那么为什么它不起作用呢？

因为编译后的css使用的路径是基于它所在的目录，所以./css。因此，如果您在文件夹./css 中有您的main.css 文件，那么../ 将引用项目的根目录./。从根目录开始，只有一个 theme 文件夹可供查找，并且此级别上没有 assets 或 fonts 文件夹。

解决方案

您所要做的就是将所有路径更改为：

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

您还可以通过对字体目录使用变量或常量来改进您的 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',
);

$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;
  }
}

...然后就可以了。它就像一个魅力。

【讨论】：