css - Rails 4 - 合并供应商 Assets

Question

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

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

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

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

我有一个名为“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
  /

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

我现在找到这篇文章:

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

它表明我需要向我的配置添加一些内容，但我对可能是什么(或者它是否在正确的 rails 上)感到困惑，因为问题是关于图像文件的。

谁能理解这一点？

进一步尝试

我还尝试将链接标记添加到我的布局头部以引用样式表(应该已经通过 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

这是一个带有 wrap bootstrap 主题的供应商 Assets 。我最初将它放在我的 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 加载引用

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

谁能看出哪里出了问题？

另一个线索

我找到了另一篇博文，描述了在 Rails 中设置 Bootstrap 主题时遇到的问题。用户发现了与我遇到的错误之一类似的 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 将被跨板使用，即在每个页面上使用，那么将它放在您的 assets/stylesheets 中会更可取> 目录，并在 application.css 文件中要求它。