CSS 需要订单 - 资产管道

Question

我有一个应用程序呈现一个名为 feeds 的视图，它带有自己的样式 feeds.scss。该视图使用名为 default_app.scss 的布局。

控制器动作有render layout: 'default_app'。在default_app.html.erb、= stylesheet_link_tag 'default_app', params[:controller]中，表示首先需要布局样式表。

这里的问题是，在 default_app.scss 中，我定义了一组常量颜色，例如：$red: #aaa 但是当我在 feeds.scss 中使用 $red 时，它是未定义的.这没有意义，因为在页面之前不需要布局样式吗（视图特定 css）？

app
- assets
  - stylesheets
    - newsfeeds
      - feeds.scss (want to use colors here)
  - default_app.scss (defined colors here)
- controllers
  - newsfeeds_controller.rb
- views
  - newsfeeds
    - feeds.html.haml
  - layouts
    - default_app.html.haml (= stylesheet_link_tag 'default_app', params[:controller])

Answer 1

这是我的第一次尝试。我不确定你用 params[:controller] 做什么。 stylesheet_link_tag 将来源作为参数，请参见此处 http://apidock.com/rails/ActionView/Helpers/AssetTagHelper/stylesheet_link_tag

这将是默认设置 - stylesheet_link_tag "style", media: "all"

如果您正在寻找特定于控制器的示例 - 请参阅此处的示例 http://guides.rubyonrails.org/asset_pipeline.html

"You can also opt to include controller specific stylesheets and JavaScript files only in their respective controllers using the following:"

<%= javascript_include_tag params[:controller] %> or <%= stylesheet_link_tag params[:controller] %>

请阅读第 2.4 节 (http://guides.rubyonrails.org/asset_pipeline.html)，其中您正在处理 css 到 application.css 的主要布局。这应该为您指明正确的方向。这可能是由于您需要文件的方式。如果您仍然遇到困难，请随时展示您如何需要文件

Answer 2

Scss 变量在编译时处理，您使用它们的顺序实际上对变量并不重要，因为当代码链接到 .css 文件时，变量已经被资产管道上的 scss 编译器替换，feeds.css.scss 不知道 $red 是什么意思，因为它是在另一个文件中定义的。

您必须在每个使用变量的 .scss 文件中包含变量。

_colors.css.scss

$red: #ff0000;
$blue: #0000ff;
$gree: #00ff00;

default_app.css.scss

@import('colors');
.something {
  color: $red;
}

feeds.css.scss

@import('colors');
.other_thing {
  color: $red;
  background: $blue;
}

CSS 需要订单 - 资产管道

CSS Require Order - Asset Pipeline

ruby-on-rails

asset-pipeline