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（in /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上没什么可看的，只是没有任何外部文件依赖，所以我不会显示它。所以看一下错误信息，这个“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;

（注意：我在_ /vendor/assets/stylesheets/bootstrap里面看到另一个boostrap.scss，其中_variables.ss位于此处）啊哈！有那个小怪胎，“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");
}

这将引用该文件，无论它是否已预编译（＆amp; 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 */

轨道引擎和资产

1 个答案: