问题
I'm trying to figure out how to plug in a bootstrap theme. I have the compass-rails gem and Rails 4.
I have a series of errors showing in my console which say:
Failed to load resource: the server responded with a status of 404 (Not Found)
I think its because my paths to where the vendor assets are saved are not correct.
I have a layout called 'profile.html.erb'
In that layout, i have included:
<link href="vendor/assets/stylesheets/magnific-popup.css" rel="stylesheet" type="text/css"/>
The css file referenced is saved in my vendor/assets/stylesheets folder.
The full text of the error shows a link to:
http://localhost:3000/profiles/vendor/assets/stylesheets/magnific-popup.css
The extra bit is the reference to profiles.
Can anyone see what I've done wrong in defining these paths?
FURTHER ATTEMPT
I just found this post: How to load vendor asset folder in Rails 4?
Taking the advice in that post, I tried to change my application.css.scss file so that instead of using the path reference, I have;
@import "css/magnific-popup";
When I save, restart the server, I get this error:
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
Can anyone see what I need to do to be able to integrate these vendor assets in my Rails 4 app?
I have now found this post:
https://github.com/rails/rails/issues/11759
It suggests that I need to add something to my config, but I'm confused about what that might be (or if its on the right track) since the question is about an image file.
Can anyone make sense of this?
FURTHER ATTEMPT
I have also tried adding link tags to my layout head section to reference the stylesheets (which are already supposed to be imported via application.css.scss).
I have added:
<%= stylesheet_link_tag "magnific-popup.css" %>
to the layout head section.
When I try this I get an error message telling me to add the following line to my config/initializer/assets.rb:
Rails.application.config.assets.precompile += %w( magnific-popup.css )
When I try that, I still get the same error (404). I don't understand why its required (or what its doing. I thought adding the import magnific-popup to the application.css.scss was all that was required).
I wonder whether I need to link to the path in vendor from the layout... if this is even required.
For the javascript files, I am getting two sorts of errors:
The first is:
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
I have a file called:
circle-progress.js
It's a vendor asset that came with a wrap bootstrap theme. I had originally put it in my vendor/assets/javascripts folder and then required in application.js
I saw chat on another help forum where someone solved their problem by moving the file to app/assets/javascripts and then removing the require statement from application.js.
I tried that, and re-ran rake assets:precompile, but I still get the error.
The second problem is:
TypeError: dp('#portfolioFiltering').multipleFilterMasonry is not a function. (In 'dp('#portfolioFiltering').multipleFilterMasonry', 'dp('#portfolioFiltering').multipleFilterMasonry' is undefined)
onloadmain.self-5888479bd3eb03114ce5776dd32cfadf84f1d3a4335043513f8b1606d3ab5f4a.js:315
And displays an E onload reference to http://localhost:3000/assets/main.self-5888479bd3eb03114ce5776dd32cfadf84f1d3a4335043513f8b1606d3ab5f4a.js?body=1
I have run out of things to try for how to solve these problems.
Can anyone see where things have gone awry?
ANOTHER CLUE
I found another blog post describing problems encountered in setting bootstrap themes up in rails. The user found similar javascript errors to one of the ones i have and it was attributable to having two versions of jQuery enabled.
My application.js file has all of this:
//= 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()
});
Each reference to jQuery has a different suffix to it, but can anyone see where one might be a duplicate of another?
回答1:
This is getting it from a relative path, i.e it is looking at the specified url relative to the current path.
One thing you can do is to specify an absolute path for it.
To do this, note that the path will then be relative to your public folder.
Therefore, if you want to use a url as /vendor/assets/stylesheets/magnific-popup.css, the magnific-popup.css file will have to be in the public/vendor/assets/stylesheets directory.
However, as mentioned by Petr Gazarov above, if the css is one that will be used across-board, that is on every page, it will be more preferable to have it in your assets/stylesheets directory, and require it in the application.css file.
来源：https://stackoverflow.com/questions/36684671/rails-4-incorporating-vendor-assets