导轨引擎和资产

Question

我有一个带有小部件的Rails引擎。 我正在使用layout: false渲染小部件layout: false render中的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变量”在哪里？ 好吧，在我们到达那里之前，让我先带你们进行实地考察。

我首先跟踪了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是_variable.scss

@import "ss-variables";

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

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

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

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

Answer 1

从外观asset_fingerprinting ，您的问题可能是由资产管道的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 */