Question

我正在试图弄清楚如何插入引导主题。我有指南针轨道宝石和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
  /Users/melaniemaslem/.rvm/gems/ruby-2.3.0/gems/bootstrap-sass-3.3.5.1/assets/stylesheets
  /Users/melaniemaslem/.rvm/gems/ruby-2.3.0/gems/font-awesome-sass-4.4.0/assets/stylesheets

任何人都可以看到我需要做些什么来将这些供应商资产集成到我的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是所有必需的。）

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

对于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资产：预编译，但我仍然得到错误。

第二个问题是：

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中设置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文件夹。

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

然而，如上面的Petr Gazarov所述，如果css是将在每个页面上使用的css，那么将它更好地放在assets/stylesheets目录中，并且需要它在application.css文件中。

Rails 4 - 合并供应商资产

1 个答案: