轨道引擎和资产

Question

我有一个带有小部件的 Rails 引擎。我在渲染中使用layout: false 属性渲染小部件并设置小部件的样式，我正在我的主应用程序上回收 CSS。

现在是棘手的部分，我的小部件只需要 3 个样式表，其中 2 个在我的主应用程序中，它们是 bootstrap.css 和 _ss_font.css。在开发中，它工作正常，但是当我将它推向生产时，我在 bootstrap.css 上遇到错误，它似乎依赖于我的供应商资产上的另一个文件。如何包含这些资产？

注意：如果我使用=stylesheet_link_tag "application"，我的问题将部分解决，但我必须处理冲突的类名，它将包括我的应用程序中的所有资产。我只想加载必要的样式表以在引擎中设置小部件的样式。

编辑 1

正如建议的那样，我将对此进行更具描述性的解释：

这就是我遇到的错误。

ActionView::Template::Error（未找到要导入的文件或无法读取： ss 变量。加载路径： /data/serviceseeking_au_staging/releases/20140604114806（在 /data/serviceseeking_au_staging/releases/20140604114806/vendor/assets/stylesheets/bootstrap.scss)）：

2: !!! 5
3: %html
4:   %head
5:     = stylesheet_link_tag "bootstrap", "_ss_font", "feedback/reviews-widget" 
6: 
7:   %body
8:     .reviews-container   
lib/action_logger.rb:31:in `call'

这个视图在引擎内部。如您所见，这是我的理想目标，只包含 3 个样式表。 reviews-widget 上没什么可看的，它只是没有任何外部文件依赖的 sass，所以我不会展示它。那么查看错误消息，这个“ss-variable”在哪里？好吧，在我们到达那里之前，让我先带你们去实地考察一下。

我首先追踪bootstrap.scss 的位置，发现它位于vendor/assets/stylesheets 文件夹下的主应用程序中。其内容如下：

 @import "bootstrap/variables";
 @import "bootstrap/mixins";

 @import "bootstrap/scaffolding";

 @import "bootstrap/grid"; 
 @import "bootstrap/layouts";

 etcetera...

所以通过跟踪 boostrap.scss 并打开它，我看到它正在导入一个名为 _variables.scss 的部分，等等，这里是 _variable.scss

@import "ss-variables";

// Grays
// -------------------------
$black:                 #000 !default;
$grayDarker:            #222 !default;

（注意：我在 _variables.ss 所在的/vendor/assets/stylesheets/bootstrap 中看到了另一个 boostrap.scss）啊哈！有那个小怪胎，“ss-variable”！！我们正在接近这场疯狂的部分追逐。所以我搜索了ss-variables.scss 的位置，并在我的主应用程序的lib/assets/stylesheets/ 上找到了它，它包含更多的scss 变量。

因此跟踪它们，我提出了这个假设，即当尝试在我的引擎上使用 stylesheet_link_tag 包含 bootstrap 时，引擎看不到位于主应用程序上的依赖文件。

奖励：我有一种非凡的感觉，在此之后，_ss_font css 将是下一个。但这是另一个故事。谢谢。

Answer 1

从外观上看，您的问题可能是由资产管道的 asset_fingerprinting 功能引起的 - 基本上是在所有 production 资产中附加一个 MD5 哈希

--

资产指纹

基本上，如果您使用 Heroku 之类的东西（这需要对您的资产进行预编译才能提供服务），您基本上会在您的 public/assets 文件夹中获得一系列文件，如下所示：

|-public
|--assets
|---images
|---stylesheets
|---javascripts

此文件夹中包含的文件在预编译时都具有fingerprinted 文件名。这意味着如果您想调用其中之一，则需要使用 ERB / SCSS 预处理器之一来访问它们：

#app/assets/stylesheets/application.css.scss
.style {
   background: asset_url("background.png");
}

这将引用该文件，无论它是否已预编译 (&fingerprinted)。虽然不完全是您的问题，但它是您所问问题的一个重要因素

--

修复

我建议您的问题很可能是您引用了“静态”CSS 文件，这些文件确实需要动态引用。

我如何包含这些资产？

你最好像这样使用@import：

#gem/app/assets/gem/widget.css.scss
@import "bootstrap.css" /* will probably need a relative path for this */
@import "other.css" /* again, will need a relative path */