bourbon sass font-face 字体位置使用 npm 编译错误

Question

我正在使用 bourbon and using their font-face sass function。

请参阅下面我的 sass。

$panton: (

    ("Panton-Light-Italic", 'italic', 300),
    ("Panton-Light", 'normal', 300),

    ("Panton-Regular", 'normal', 400),
    ("Panton-Regular-Italic", 'italic', 400),

    ("Panton-Bold", 'normal', 600),
    ("Panton-Bold-Italic", 'italic', 600),

);

@each $p in $panton {
  @include font-face(
      "Panton",
      "../fonts/panton/#{nth($p,1)}",
          ("woff2", "woff")
  ) {
    font-style: #{nth($p,2)};
    font-weight: #{nth($p,3)};
  }
}

但我在编译时遇到问题并收到此错误。

ModuleNotFoundError: Module not found: Error: Can't resolve '../../node_modules/bourbon/core/bourbon/fonts/panton/Panton-Bold-Italic.woff' in '/Users/joshcranwell/Sites/werksmotorsport-v2/src/scss'

出于某种原因，它在 bourbon node_modules 文件夹中查找字体，而实际上它位于此处...

这是我的 webpack.mix.js，它非常适合字体真棒，没有附加变量覆盖。我所有需要的字体真棒字体都按预期编译到发行版中。

 mix.js('src/js/theme.js', 'dist/js')
    .js('src/js/dashboard.js', 'dist/js')
    .sass('src/scss/screen.scss', 'dist/css')
    .sass('src/scss/dashboard.scss', 'dist/css')
    .setPublicPath('dist')
    .setResourceRoot('../');

但是有些在使用 bourbon font-face 时无法编译。

任何帮助都会很棒。

更新

如果我在 url 上使用 ~/../fonts/panton/#{nth($p,1)}，它会编译但不会将字体移动到分发文件夹。

此外，控制台错误显示奇怪的位置（没有 dist 文件夹）

Answer 1

也许这不是您正在寻找的答案，但我怀疑这是 Bourbon 在某个地方与 Webpack 发生冲突。它可能比它的价值更难诊断——除非你在整个项目中大量使用 Bourbon？我会说它相对多余，你可以用不多的代码实现它 -

$panton: (

    ("Panton-Light-Italic", 'italic', 300),
    ("Panton-Light", 'normal', 300),

    ("Panton-Regular", 'normal', 400),
    ("Panton-Regular-Italic", 'italic', 400),

    ("Panton-Bold", 'normal', 600),
    ("Panton-Bold-Italic", 'italic', 600),

);

@each $p in $panton {
  @font-face {
    font-family: "Panton";
    src: url("../fonts/panton/#{nth($p,1)}.woff2") format('woff2'),
         url("../fonts/panton/#{nth($p,1)}.woff") format('woff'),
    font-style: #{nth($p,2)};
    font-weight: #{nth($p,3)};
  }
}

也许试试看？

bourbon sass font-face 字体位置使用 npm 编译错误

bourbon sass font-face font location compile error with npm

font-face

npm

bourbon

webpack