Question

我想用 yarn 或 bower 工具管理我的前端，直接从github下载软件包，我有一些麻烦来调用这些文件application.css或application.js。

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

中所写的更改

1。使用该命令生成纱线 package.json 文件和组件文件夹：

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'检查这些路径：
  /家庭/ fillype /代码/ modusss /博客/应用/资产/配置
  /家庭/ fillype /代码/ modusss /博客/应用/资产/图像
  /家庭/ fillype /代码/ modusss /博客/应用/资产/ JavaScript的
  /家庭/ fillype /代码/ modusss /博客/应用/资产/样式
  /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

我用这种方式解决了问题：

此后错误消息不再出现：

无法在 assets.rb ：
上添加此内容
Rails.application.config.assets.paths＆lt;＆lt; Rails.root.join（“供应商”，“资产”，“组件”）
我在 application.rb 上添加了这行代码：

WM_CREATE

现在页面开始加载，但图标上有一些正方形[]。然后我知道sass-rails gem有助手来调用字体，所以我改变了文件module Blogapp class Application < Rails::Application config.load_defaults 5.1 config.assets.paths << Rails.root.join("vendor", "assets", "bower") end end以这种方式调用字体的方式：

之前：

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; }，它不是指定资产路径的正确位置。

在我成功添加了像我解释过的字体之后，我以非常简单的方式添加了 bootstrap ：

从命令行下载：

bower install bootstrap-sass-official --save
只在assets.rb上添加这三行代码（我们必须从 .css 重命名为 .scss 才能工作！{/ em>）正如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”;

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

1 个答案: