css - Ruby on Rails，连接后 css 中的 url() 损坏

Question

情况

1. 使用bower在 .bowerrc
2. 在 bowerrc设置目录 vendor/assets/bower_components
3. 在配置application.rb我输入了 config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')
4. 安装名为 «fotorama» 的图库插件，由 bower 完成
5. 插件 «fotorama» 的所有文件现在都存储在这个目录中 "/vendor/assets/bower_components/fotorama"
6. 在 list css 文件中 application.css我输入 *= require fotorama/fotorama.css
7. 在布局文件中我输入了<%= stylesheet_link_tag "application" %>

启动服务器 rails server - 一切都好。在生成页面的源代码中，我看到了 <link href="/assets/fotorama/fotorama.css?body=1" rel="stylesheet" /> .此 css 文件有此行 .fotorama__video-play {background: url(fotorama.png) no-repeat} ，以及许多其他使用文件“fotorama.png”的 url 的行，没关系，浏览器尝试在 css 文件附近找到这个 png 文件，并成功找到它。

停止服务器，预编译所有资源 rake assets:precompile , 然后在生产环境中运行服务器 rails server -e production

问题

在生产中，我所有的 css 文件都连接在一起，在页面源代码中它看起来像这样 <link href="/assets/application-2d31fc33890d01b046194920367eb3d4.css" rel="stylesheet" /> , 这个文件仍然有这行 .fotorama__video-play {background: url(fotorama.png) no-repeat} .现在浏览器试图在这里找到 png 文件 http://localhost:3000/assets/fotorama.png , 但它不在这里，它不在任何地方，因为，我不知道为什么，没有 "fotorama.png"在"public/assets"文件夹。

问题

1. 为什么没有从 "/vendor/assets/bower_components" 传输图片到“public/assets”
2. 你有什么想法吗？我可以做些什么来解决我的问题？重要的是，我不想以编程方式手动更改 css 中的 url — 好的。

请原谅我的英语不好，感谢所有帮助我的人。

Answer 1

解决方案和答案

1. 仅来自 "app/assets" 的文件运输到 "public/assets"默认情况下。从 "/vendor/assets" 传输图像输入 "application.rb"此代码 config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
2. gulp 任务:如果您看到 "bower.json" 中有一些变化，通过名为“main-bower-files”的 npm 模块获取 Bower 组件的所有主要文件。使用 .erb 为每个 css 文件生成 list 文件扩展名，并保存 "app/assets/stylesheets/bower_components_manifest.css"
3. 此任务继续:在每个主要的 css 文件中，通过名为“gulp-css-url-adjuster”的 npm 模块，在每个 url 之前添加 <%= asset_path '加上目录路径，在 ' %> 之后. url("fotorama.png") >> url("<%= asset_path 'fotorama/fotorama.png' %>") .添加.erb扩展并保存。
4. 在 "app/assets/stylesheets/application.css"我添加 * require bower_components_manifest .

其他解决方案之一是使用 gem“bower-rails”。但我不喜欢它，因为在 bower 的某些插件中我需要覆盖一些“主”文件，而 gem“bower-rails”不能这样做，npm“main-bower-files”可以。我喜欢在开始之前为我所做的一切保存我的工作流程，包括我的代码到 rails、gulp、bower。