Rails 4 – 包含供应商资产
我正在试图弄清楚如何插入一个bootstrap主题。 我有指南针轨道gem和Rails 4。
我的控制台中显示了一系列错误：
Failed to load resource: the server responded with a status of 404 (Not Found) 我认为这是因为我保存供应商资产的路径不正确。
我有一个名为’profile.html.erb’的布局
在那个布局中，我包括：
引用的css文件保存在vendor / assets / stylesheets文件夹中。
错误的全文显示了以下链接：
http://localhost:3000/profiles/vendor/assets/stylesheets/magnific-popup.css
额外的位是对配置文件的引用。
谁能看到我在定义这些路径时做错了什么？
进一步尝试
我刚刚发现这篇文章： 如何在Rails 4中加载供应商资产文件夹？
根据该post中的建议，我尝试更改我的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导入）。
我已经添加了：
到布局头部分。
当我尝试这个时，我收到一条错误消息，告诉我将以下行添加到我的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
并显示一个E onload引用到http：// localhost：3000 / assets / main.self-5888479bd3eb03114ce5776dd32cfadf84f1d3a4335043513f8b1606d3ab5f4a.js？body = 1
我已经没有什么可以尝试解决这些问题了。
任何人都可以看到事情出了问题吗？
另一个CLUE
我发现了另一篇博客文章，描述了在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的引用都有不同的后缀，但任何人都可以看到哪一个可能与另一个重复？
这是从相对路径获取它，即它查看相对于当前路径的指定URL。
你可以做的一件事是为它指定一个绝对路径。
为此，请注意该路径将相对于您的公用文件夹。
因此，如果要将URL用作/vendor/assets/stylesheets/magnific-popup.css ，则magnific-popup.css文件必须位于public/vendor/assets/stylesheets目录中。
但是，如上面的Petr Gazarov所提到的，如果css是将在每个页面上使用的css，那么将它更可取在assets/stylesheets目录中，并在application.css需要它application.css文件。