如何在使用dartsass-rails的Rails应用中正确链接库中资源文件

• 第一步：调整字体文件存放位置
  把你的foo.woff字体文件移动到app/assets/fonts/目录（如果该目录不存在，直接新建即可）。Rails的asset pipeline默认会扫描这个目录下的字体资源。

• 第二步：修改SCSS中的@font-face路径
  不要用相对路径，改用Rails提供的asset辅助函数生成正确的资源路径，替换原来的代码为：

  @font-face {
    font-family: "FooBar";
    src: asset_url("foo.woff");
    font-weight: normal;
    font-style: normal;
  }
  

  或者使用专门的font-url函数，效果一致：

  @font-face {
    font-family: "FooBar";
    src: font-url("foo.woff");
    font-weight: normal;
    font-style: normal;
  }
  

• 原写法报错的原因
  你之前用的相对路径../foo.woff是基于SCSS源文件的位置，但dartsass-rails编译后，CSS文件会被输出到public/assets/目录（通常还会加上指纹后缀），而字体文件经过asset pipeline处理后也会被放到同一个public/assets/目录下。直接用相对路径会导致浏览器从编译后的CSS所在位置向上查找，自然找不到字体文件。而asset_url或font-url会自动处理资源的路径映射和指纹生成，确保运行时能正确指向字体文件的实际位置。

• 额外检查项
  如果你的Rails应用没有自动识别app/assets/fonts目录，可以打开config/assets.rb，添加一行：

  Rails.application.config.assets.paths << Rails.root.join("app/assets/fonts")
  

  然后重启服务器生效。

内容的提问来源于stack exchange，提问作者emmaakachukwu