Situation

  1. I use bower .
  2. In .bowerrc registered directory "vendor/assets/bower_components" .
  3. In the application.rb register, config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components') wrote the config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components') .
  4. I installed the fotorama plugin.
  5. All files of photo frames now lie here "/vendor/assets/bower_components/fotorama" .
  6. Then I added the line *= require fotorama/fotorama.css to application.css (I added what I need in application.js, but this is not important here).
  7. In the layout file, I wrote <%= stylesheet_link_tag "application", media: "all" %> .

I run the rails server - everything works just perfect. The file with css was inserted in this way <link href="/assets/fotorama/fotorama.css?body=1" media="all" rel="stylesheet" /> , inside this file there is a line: .fotorama__video-play {background: url(fotorama.png) no-repeat} , and indeed, the fotorama.png file is next to the css file specified in the <link> . I chop off the server, recompile all assets rake assets:precompile and start the server in production mode rails server -e production .

Problem

In production mode, all css is merged into one large file, it looks like this: <link href="/assets/application-2d31fc33890d01b046194920367eb3d4.css" media="all" rel="stylesheet" /> , it still has a line .fotorama__video-play {background: url(fotorama.png) no-repeat} , well, in general, because of it the browser is trying to find a file with a picture here: http://localhost:3000/assets/fotorama.png , and there is no, honestly, it is nowhere else at all.

Questions:

  1. Why didn't the pictures from the /vendor/assets/bower_components folder fly to the public/assets folder?
  2. In order to come up with this, it will work, provided: do not change the contents of the fotorama.css file with my hands (programmatically, I agree), because I’m not comfortable with my hands into vendor packages?

I have not been able to cope with this problem for a long time, I will be grateful for any attempts to help me. Thank.

    1 answer 1

    Hey, there's an awesome bower-rails gem. You put, you write dependencies in Bowerfile , you make rake bower:install . All problems with assets are immediately eliminated.

    • I considered it as an option, but I sometimes need to override the "main" property specified in the separate "main" plugin config by adding this new "main" to the "overrides" property in the bower.json file. So that later my gulpfile selected only what I need with the help of the "Main Bower Files" module. Is it possible to do something with gem 'bower-rails'? - iserdmi
    • No, I do not know how to help you. - Vladimir Gordeev
    • I found a decent solution. But I don't have enough reputation to post it as an answer. Therefore, if briefly like this: 1. Create a task for gulp: if you see a change in the bower.json file, use the npm module main-bower-files to collect all the files specified in the main for each of the plugins installed in bower. Create a manifest file from css file paths and a manifest file from js files (for css "app/assets/stylesheets/bower_components_manifest.css" ). 2. Task for gulp: if you see changes in the file "bower.json" , collect all the css files, go through them, and with the help of the npm module ... - iserdmi
    • ... and using the gulp-css-url-adjuster module, put this line <%= asset_path ' before each relative url in each css file, and put the line ' %> after each url. 3. in the file "app/assets/stylesheets/application.css" prescribe "require bower_components_manifest" . 4. In order for the pictures and other files to be transferred from the "/vendor/assets/bower_components" folder to the "public/assets" folder, you need to write in the "application.rb" config this line "config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)" , because by default only files from the" app / assets "folder are transferred. - iserdmi
    • I forgot to write. For each css file when you make changes to urls there, you need to add not only the cut code but also the path to the file. Thus, the url("fotorama.png") >> url("<%= asset_path 'fotorama/fotorama.png' %>") , also the file extension ".erb" - iserdmi also required for each file