试图将javascript模板导入rails应用程序可能已经破坏了资产管道中的某些内容

Question

我正在尝试将静态javascript模板导入到基本的rails应用程序中，以便我可以使用它构建更多的rails功能（特别是使用后端）。 这是一个可能相关目录/文件的窗口......

/应用/资产/样式表/

• application.css
• base.css
• blue.css
• 自举-responsive.css
• 自举-responsive.min.css
• bootstrap.css
• bootstrap.css.erb
• bootstrap.css.scss
• bootstrap.min.css
• bootstrap_and_overrides.css.less
• docs.css.less
• fontawesome.css.erb
• glyphicons.css
• sprites.css.erb

/app/assets/stylesheets/application.css：

/* This is a manifest file that'll be compiled into application.css, 
* which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, 
* lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can 
* be referenced here using a relative path.
*
* You're free to add application-wide styles to this file 
* and they'll appear at the top of the
* compiled file, but it's generally better to create a 
* new file per style scope.
*
*= require formtastic-bootstrap
*= require_self
*= require_tree .
*/

/应用/资产/字体：

• glyphicons readme.txt
• glyphicons-regular.otf
• glyphicons-regular.svg
• glyphicons-regular.ttf
• glyphicons-regular.woff
• glyphiconshalflings-regular.eot
• glyphiconshalflings-regular.otf
• glyphiconshalflings-regular.svg
• glyphiconshalflings-regular.ttf

我会非常感谢任何帮助，非常感谢你！

===更新=====

正如@m_x建议的那样，我需要将我的清单文件（即应用程序中的application.css - ＆gt; assets - ＆gt; stylesheets目录）与原始模板中引用文件的顺序相匹配（在索引中） .html标签）。这是新版本：

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *  add after glyph <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
 *= require_self
 *= require bootstrap.min.css
 *= require bootstrap-responsive.min.css
 *= require glyphicons.css
 *= require google-fonts.css
 *= require base.css
 *= require blue.css
 */

=======

以上代码基于模板中的index.html文件，其中重要部分如下：

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="css/glyphicons.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
<link href="css/base.css" rel="stylesheet">
<link href="css/blue.css" rel="stylesheet">

请注意，我手动创建了一个文件，用于包含上面列出的第4个网址中找到的css（我将此css文件命名为“google-fonts.css”），因为我不确定如何引用网址...

Answer 1

您有多个具有相同名称但扩展名不同的文件。我不确定erb，scss，less文件在编译期间是否会覆盖标准css，因此可能为一个你的问题的原因。

除此之外，问题最主要的原因是require_tree按照文件系统中找到的顺序包含文件。这意味着，在您的情况下，bootstrap-responsive.css可能会包含在之前 bootstrap.css（取决于您的文件系统）。如您所知，包含文件的顺序对于样式表和脚本都非常重要。

强制包含顺序有两种主要解决方案：

1. 而不是require_tree，使用the guides中所述的require <filename>，并按照您想要的任何顺序手动每个文件（即您包含它们的顺序）在使用资产管道之前的头部）。为了简化管理并整理文件夹，您可以将资源拆分到不同的文件夹中;如果您在文件夹中创建名为index的清单，则使用require <folder_name>将包含此清单。这就是我通常做的事情。
2. 有些人更喜欢在每个文件前加上一个数字，例如： 01_bootstrap.css，02_bootstrap-responsive.css等。我从未使用过此方法，但AFAIK似乎有效。