1

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

/应用程序/资产/样式表/

  • 应用程序.css
  • base.css
  • 蓝色的.css
  • 引导响应.css
  • 引导响应.min.css
  • 引导程序.css
  • 引导程序.css.erb
  • 引导程序.css.scss
  • bootstrap.min.css
  • bootstrap_and_overrides.css.less
  • docs.css.less
  • fontawesome.css.erb
  • 字形图标.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 .
*/

/应用程序/资产/字体：

  • 字形自述文件.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）与原始模板中引用文件的顺序（在 index.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">

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

4

1 回答 1

0

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

除此之外，这个问题最肯定源于这样一个事实，即按照在文件系统上找到它们的顺序require_tree包含文件。这意味着，在您的情况下，可能会在之前包含（取决于您的文件系统）。如您所知，包含文件的顺序对于样式表和脚本都非常重要。bootstrap-responsive.css bootstrap.css

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

  1. 而不是，按照指南中的说明require_tree使用并手动包含每个文件，按照您想要的任何顺序（即在使用资产管道之前将它们包含在头部中的顺序）。为了便于管理和整理文件夹，您可以将资产拆分到不同的文件夹中；如果您在文件夹中创建命名清单，则 using将包含此清单。这就是我通常做的。require <filename>indexrequire <folder_name>
  2. 有些人更喜欢在每个文件前加上一个数字，例如01_bootstrap.css，02_bootstrap-responsive.css等。我从未使用过这种方法，但 AFAIK 它似乎有效。
于 2013-05-24T13:24:54.280 回答