Rails 4 - 合并供应商资产

Question

我正在尝试弄清楚如何插入引导主题。我有 compass-rails gem 和 Rails 4。

我的控制台中显示了一系列错误：

Failed to load resource: the server responded with a status of 404 (Not Found)

我认为这是因为我保存供应商资产的路径不正确。

我有一个名为“profile.html.erb”的布局

在那个布局中，我包括：

<link href="vendor/assets/stylesheets/magnific-popup.css" rel="stylesheet" type="text/css"/>
        

引用的 css 文件保存在我的 vendor/assets/stylesheets 文件夹中。

错误的全文显示一个链接到：

http://localhost:3000/profiles/vendor/assets/stylesheets/magnific-popup.css

额外的位是对配置文件的引用。

谁能看到我在定义这些路径时做错了什么？

进一步尝试

我刚刚发现了这个帖子： How to load vendor asset folder in Rails 4?

根据那篇文章中的建议，我尝试更改我的 application.css.scss 文件，以便我没有使用路径引用；

@import "css/magnific-popup";

当我保存，重启服务器，我得到这个错误：

File to import not found or unreadable: css/magnific-popup.
Load paths:
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  /Users/f3/app/assets/images
  /Users/f3/app/assets/javascripts
  /Users/f3/app/assets/stylesheets
  /Users/f3/vendor/assets/fonts
  /Users/f3/vendor/assets/javascripts
  /Users/f3/vendor/assets/stylesheets
  /Users/f/.rvm/gems/ruby-2.3.0/gems/underscore-rails-1.8.3/vendor/assets/javascripts
  /Users/f/.rvm/gems/ruby-2.3.0/gems/gmaps4rails-2.1.2/vendor/assets/javascripts
  /Users/f/.rvm/gems/ruby-2.3.0/gems/chosen-rails-1.4.3/vendor/assets/images
  /Users/f/.rvm/gems/ruby-2.3.0/gems/chosen-rails-1.4.3/vendor/assets/javascripts
  /Users/f/.rvm/gems/ruby-2.3.0/gems/chosen-rails-1.4.3/vendor/assets/stylesheets
  /Users/f/.rvm/gems/ruby-2.3.0/gems/chartkick-1.4.1/app/assets/javascripts
  /Users/f/.rvm/gems/ruby-2.3.0/gems/formtastic-2.2.1/app/assets/stylesheets
  /Users/f/.rvm/gems/ruby-2.3.0/bundler/gems/surveyor-5281b317a559/lib/assets/images
  /Users/f/.rvm/gems/ruby-2.3.0/bundler/gems/surveyor-5281b317a559/lib/assets/javascripts
  /Users/f/.rvm/gems/ruby-2.3.0/bundler/gems/surveyor-5281b317a559/lib/assets/stylesheets
  /Users/f/.rvm/gems/ruby-2.3.0/gems/dependent-fields-rails-0.4.2/vendor/assets/javascripts
  /Users/f/.rvm/gems/ruby-2.3.0/gems/cocoon-1.2.6/app/assets/javascripts
  /Users/f/.rvm/gems/ruby-2.3.0/gems/disqus_rails-0.0.6/vendor/assets/javascripts
  /Users/f/.rvm/gems/ruby-2.3.0/gems/jquery-rails-4.0.5/vendor/assets/javascripts
  /Users/f/.rvm/gems/ruby-2.3.0/gems/coffee-rails-4.1.0/lib/assets/javascripts
  /Users/f/.rvm/gems/ruby-2.3.0/bundler/gems/momentjs-rails-eda1b74512db/vendor/assets/javascripts
  /Users/f/.rvm/gems/ruby-2.3.0/gems/bootstrap-slider-rails-5.3.1/vendor/assets/javascripts
  /Users/f/.rvm/gems/ruby-2.3.0/gems/bootstrap-slider-rails-5.3.1/vendor/assets/stylesheets
  /Users/f3/Rails/vendor/assets/fonts
  /Users/f/.rvm/gems/ruby-2.3.0/gems/bootstrap-sass-3.3.5.1/assets/stylesheets
  /Users/f/.rvm/gems/ruby-2.3.0/gems/bootstrap-sass-3.3.5.1/assets/javascripts
  /Users/f/.rvm/gems/ruby-2.3.0/gems/bootstrap-sass-3.3.5.1/assets/fonts
  /Users/f/.rvm/gems/ruby-2.3.0/gems/bootstrap-sass-3.3.5.1/assets/images
  /Users/f/.rvm/gems/ruby-2.3.0/gems/font-awesome-sass-4.4.0/assets/stylesheets
  /Users/f/.rvm/gems/ruby-2.3.0/gems/font-awesome-sass-4.4.0/assets/fonts
  /Users/f3/app/assets/stylesheets
  /Users/f/.rvm/gems/ruby-2.3.0/gems/compass-core-1.0.3/stylesheets
  Compass::SpriteImporter
  /

谁能看到我需要做些什么才能将这些供应商资产集成到我的 Rails 4 应用程序中？

我现在找到了这篇文章：

https://github.com/rails/rails/issues/11759

这表明我需要在我的配置中添加一些东西，但我对这可能是什么（或者它是否在正确的轨道上）感到困惑，因为问题是关于图像文件的。

谁能理解这个？

进一步尝试

我还尝试将链接标签添加到我的布局头部部分以引用样式表（应该已经通过 application.css.scss 导入）。

我已添加：

<%= stylesheet_link_tag "magnific-popup.css" %>

到布局头部分。

当我尝试这个时，我收到一条错误消息，告诉我将以下行添加到我的 config/initializer/assets.rb：

Rails.application.config.assets.precompile += %w( magnific-popup.css )

当我尝试这样做时，我仍然收到相同的错误 (404)。我不明白为什么需要它（或者它在做什么。我认为只需将 import magnific-popup 添加到 application.css.scss 即可）。

我想知道是否需要从布局链接到 vendor 中的路径...如果这甚至是必需的。

对于 javascript 文件，我遇到了两种错误：

第一个是：

 TypeError: undefined is not an object (evaluating '$')
    (anonymous function)circle-progress.self-f67ec54c54a06da27d11cda862036a058792eadc8ef982df2e7c0a1682536c31.js:8
    
    http://localhost:3000/assets/circle-progress.self-f67ec54c54a06da27d11cda862036a058792eadc8ef982df2e7c0a1682536c31.js?body=1

我有一个文件名为：

circle-progress.js

这是一个带有包装引导主题的供应商资产。我最初把它放在我的 vendor/assets/javascripts 文件夹中，然后在 application.js 中需要

我在另一个帮助论坛上看到有人通过将文件移动到 app/assets/javascripts 然后从 application.js 中删除 require 语句解决了他们的问题。

我试过了，然后重新运行 rake assets:precompile，但我仍然收到错误。

第二个问题是：

TypeError: dp('#portfolioFiltering').multipleFilterMasonry is not a function. (In 'dp('#portfolioFiltering').multipleFilterMasonry', 'dp('#portfolioFiltering').multipleFilterMasonry' is undefined)
onloadmain.self-5888479bd3eb03114ce5776dd32cfadf84f1d3a4335043513f8b1606d3ab5f4a.js:315

并显示对 http://localhost:3000/assets/main.self-5888479bd3eb03114ce5776dd32cfadf84f1d3a4335043513f8b1606d3ab5f4a.js?body=1 的 E onload 引用

我已经没有办法尝试解决这些问题了。

谁能看出哪里出了问题？

另一个线索

我发现另一篇博客文章描述了在 Rails 中设置引导主题时遇到的问题。用户发现了与我的其中一个类似的 javascript 错误，这归因于启用了两个版本的 jQuery。

我的 application.js 文件包含所有这些：

//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require html.sortable
//= require disqus_rails
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require main
//= require hammer.min
//= require jquery.animate-enhanced.min
//= require jquery.countTo
//= require jquery.easing.1.3
//= require jquery.fitvids
//= require jquery.magnific-popup.min
//= require jquery.parallax-1.1.3
//= require jquery.properload
//= require jquery.shuffle.modernizr.min
//= require jquery.sudoSlider.min
//= require jquery.superslides.min
//= require masonry.pkgd.min
//= require rotaterator
//= require smoothscrolljs
//= require waypoints.min
//= require wow.min
//= require gmaps/google
//= require chosen-jquery
//= require cocoon
//= require imagesloaded.pkgd.min
//= require isotope.pkgd.min
//= require jquery.counterup.min
//= require jquery.pjax
//= require custom.js
//= require slider
//= require underscore
//= require dependent-fields
//= require_tree .
//= require bootstrap-slider


$(document).ready(function() {
    DependentFields.bind()
});

每个对 jQuery 的引用都有不同的后缀，但任何人都可以看到其中一个可能与另一个重复吗？

Answer 1

这是从相对路径获取它，即它正在查看相对于当前路径的指定 url。

您可以做的一件事是为其指定绝对路径。

为此，请注意路径将相对于您的 public 文件夹。

因此，如果您想将 url 用作 /vendor/assets/stylesheets/magnific-popup.css，则 magnific-popup.css 文件必须位于 public/vendor/assets/stylesheets 目录中。

但是，正如上面 Petr Gazarov 所提到的，如果 css 是一个将被全面使用的 css，即在每个页面上，最好将它放在您的 assets/stylesheets 目录中，并要求它在application.css 文件。