我无法在我的 rails 项目上加载 bower/yarn 依赖项

Question

我想使用 yarn 或 bower 工具管理我的前端，以直接从 github 下载包，但我在调用文件时遇到了一些麻烦application.css 或 application.js。

所以我创建了一个简单的 rails 项目来仔细检查主要问题。我做了这篇短文中写的更改（https://sheerdevelopment.com/posts/using-yarn-with-rails）

1.使用命令生成yarn package.json文件和components文件夹：

yarn add font-awesome --modules-folder ./vendor/assets/components/

2.在 assets.rb

上添加这一行

Rails.application.config.assets.paths << Rails.root.join("vendor", "assets", "components")

3.将 application.css 更改为 application.scss 并添加：

*= require font-awesome/scss/font-awesome

obs：我也尝试不进行最后一次修改，并使用我们拥有的路径 font-awesome/css/font-awesome。

找不到类型为“font-awesome/css/font-awesome”的文件 'text/css' 在这些路径中检查：
/home/fillype/code/modusss/blog/app/assets/config
/home/fillype/code/modusss/blog/app/assets/images
/home/fillype/code/modusss/blog/app/assets/javascripts
/home/fillype/code/modusss/blog/app/assets/stylesheets
/usr/local/opt/rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/coffee-rails-4.2.1/lib/assets/javascripts /usr/local/opt/rbenv/versions /2.3.1/lib/ruby/gems/2.3.0/gems/actioncable-5.1.0.rc1/lib/assets/compiled /usr/local/opt/rbenv/versions/2.3.1/lib/ruby/gems /2.3.0/gems/actionview-5.1.0.rc1/lib/assets/compiled /usr/local/opt/rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/turbolinks-source-5.0.0/lib/assets/javascripts

Extracted source (around line #13):
11 * It is generally better to create a new file per style scope.
12 *
13 *= require font-awesome/scss/font-awesome
14 *= require_tree .
15 *= require_self
16 */

我注意到，尽管我在 assets.rb 文件中指定了此路径，但 Rails 并未在组件文件夹中查找资产。

Answer 1

我是这样解决问题的：

在此之后不再出现错误消息：

1. 建议在 assets.rb 上添加此内容：

   Rails.application.config.assets.paths

2. 我在 application.rb 上附加了这行代码：

.

module Blogapp
  class Application < Rails::Application
    config.load_defaults 5.1
    config.assets.paths << Rails.root.join("vendor", "assets", "bower")
  end
end

现在页面开始加载，但图标位置上有一些方块 []。然后我知道sass-rails gem 有调用字体的助手，所以我改变了文件bower/font-awesome/scss/_path.scss 调用字体的方式：

之前：

@font-face {
  font-family: 'FontAwesome';
  src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
  src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
    url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
    url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
    url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
    url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
//  src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
  font-weight: normal;
  font-style: normal;
}

之后：

@font-face {
  font-family: 'FontAwesome';
  src: font-url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
  src: font-url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
    font-url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
    font-url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
    font-url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
    font-url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
//  src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
  font-weight: normal;
  font-style: normal;
}

---

观察：

主要问题显然是 assets.rb 不是指定资产路径的正确位置。

按照我的解释成功添加了 font-awesome 之后，我以一种非常简单的方式添加了 bootstrap：

1. 从命令行下载：

   凉亭安装 bootstrap-sass-official --save

2. 只在application.scss 上添加这三行代码（我们必须将 .css 重命名为 .scss 才能工作！ ) 正如bootstrap-sass github page 所说的那样（但不是所有规定的内容）。

   $icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/";

   @import "bootstrap-sass/assets/stylesheets/bootstrap-sprockets";

   @import "bootstrap-sass/assets/stylesheets/bootstrap";