在Rails资产管道中使用字体

ruby-on-rails CSS

猿Tom

2020-03-17

我在Scss文件中配置了一些字体,如下所示:

@font-face {
  font-family: 'Icomoon';
  src: asset-url('icoMoon.eot?#iefix', font) format('embedded-opentype'),
       asset-url('icoMoon.woff', font) format('woff'),
       asset-url('icoMoon.ttf', font)  format('truetype'),
       asset-url('icoMoon.svg#Icomoon', font) format('svg');
}

实际的字体文件存储在/ app / assets / fonts /中

我已添加config.assets.paths << Rails.root.join("app", "assets", "fonts")到我的application.rb文件

并且编译的CSS源代码如下:

@font-face {
  font-family: 'Icomoon';
  src: url(/assets/icoMoon.eot?#iefix) format("embedded-opentype"), url(/assets/icoMoon.woff) format("woff"), url(/assets/icoMoon.ttf) format("truetype"), url(/assets/icoMoon.svg#Icomoon) format("svg");
}

但是,当我运行该应用程序时,找不到字体文件。日志:

在2012-06-05 23:21:17 +0100投放的资产/icoMoon.ttf-127.0.0.1开始获取“ /assets/icoMoon.ttf”-找不到404(13毫秒)

为什么资产管道不将字体文件压平为/ assets?

有什么想法的人吗?

亲切的问候,尼尔

额外信息:

当检查Rails控制台的资产路径和资产预编译时,我得到以下信息:

1.9.2p320 :001 > y Rails.application.config.assets.precompile
---
- !ruby/object:Proc {}
- !ruby/regexp /(?:\/|\\|\A)application\.(css|js)$/
- .svg
- .eot
- .woff
- .ttf
=> nil



1.9.2p320 :002 > y Rails.application.config.assets.paths
---
- /Users/neiltonge/code/neiltonge/app/assets/fonts
- /Users/neiltonge/code/neiltonge/app/assets/images
- /Users/neiltonge/code/neiltonge/app/assets/javascripts
- /Users/neiltonge/code/neiltonge/app/assets/stylesheets
- /Users/neiltonge/code/neiltonge/vendor/assets/images
- /Users/neiltonge/code/neiltonge/vendor/assets/javascripts
- /Users/neiltonge/code/neiltonge/vendor/assets/stylesheets
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/jquery-rails-2.0.0/vendor/assets/javascripts
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/coffee-rails-3.2.1/lib/assets/javascripts
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/bourbon-1.3.0/app/assets/stylesheets
- !ruby/object:Pathname
  path: /Users/neiltonge/code/neiltonge/app/assets/fonts
 => nil

第1923篇《在Rails资产管道中使用字体》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
JimGO 2020.03.17

如果您有一个名为scaffolds.css.scss的文件,则可能会覆盖其他文件中正在执行的所有自定义操作。我注释掉了该文件,然后突然一切正常。如果该文件中没有任何重要内容,则最好将其删除!

神奇神无A 2020.03.17

如果您不想跟踪字体移动:

# Adding Webfonts to the Asset Pipeline
config.assets.precompile << Proc.new { |path|
  if path =~ /\.(eot|svg|ttf|woff)\z/
    true
  end
}

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android