将外部 css 和 js 放在哪里

Question

我刚开始使用 Rails 并加载像 css 和 js 这样的外部资源对我来说一直是个问题。在几个地方阅读，我发现css 应该放在app/assets/stylesheets 和js 里面app/assets/javascripts。完成此操作后，我在我的视图文件中调用了我的css 和js，例如

<%= stylesheet_link_tag "<<path to my css>>" %> 

对于 css 和

<%= javascript_include_tag "<<path to my js>>"  %>

我在我的config/initializers/assets.rb 中加入了这一行

Rails.application.config.assets.precompile += [/.*\.js/,/.*\.css/]

但是这样做给了我某种编译错误。但我不确定加载外部资源是否正确。我需要更改以加载css 和js 的其他地方以及在rails 中包含外部资源的最佳实践在性能方面也是如此。

Answer 1

资产管道

您所指的是称为 asset pipeline 的东西 - app/assets 文件夹是您存储 HTML 的所有“依赖”文件的地方 - css / js / images 等。

资产管道非常简单 -

资产管道提供了一个框架来连接、缩小或压缩 JavaScript 和 CSS 资产。它还增加了用其他语言和预处理器（如 CoffeeScript、Sass 和 ERB）编写这些资产的能力。

它的功能是为您提供一种将您的 CSS/JS“编译”成压缩 (minified) 文件的方法，您可以在前端 HTML 中调用这些文件。最终目标是使您的“资产”尽可能小，以便您的页面加载速度最快。

--

在您的情况下，您需要查找 Sprockets Manifest Directives --

#app/assets/stylesheets/application.css
/*
   *= require self
   *= require_tree .
*/

上面将获取app/assets/stylesheets 中的每个CSS 文件，并将它们连接成一个application.css 文件：

#app/views/layouts/application.html.erb
<%= stylesheet_link_tag :application %>

---

因此，要直接回答您的问题，您只需将外部样式表存储在您的 app/assets/stylesheets 文件夹中即可。

如果您有一个“真正的”外部样式表（由 Google 或其他机构托管），您需要将其包含在您的 layout 中，如下所示：

#app/views/layouts/application.html.erb
<%= stylesheet_link_tag :application, "http://cdn.google.com/stylesheet.css" %>

Answer 2

一旦您将 css 和 js 添加到相应的文件夹中，您必须在 application.js 和 application.css 中要求这些文件，然后您可以将这两个文件包含在您的 html 中。试试下面的代码：

应用程序.css

//= require abc

应用程序.js

//= require xyz

在您的 html 中：

<%= stylesheet_link_tag "application" %> 
<%= javascript_include_tag "application"  %>