如何在 Rails 中的 application.scss 中排除加载 .css 文件？

Question

我有 YooTheme 和 Bootstrap，它们互相干扰。设计师用的是YooTheme做主页，我没时间翻译。如何仅在索引页中包含 yootheme.css，而将其从其他地方的页眉中排除？我有

application.haml - 布局

/ UIkit CSS
-# %link{:rel => "stylesheet", :href => "https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/css/uikit.min.css"}/
%link{:rel => "stylesheet", :crossorigin => "anonymous", :href => "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css", :integrity => "sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"}/
= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'

application.scss

 *= require_tree .
 *= require_self

app/assets/stylesheets/yootheme.css

index.haml

=stylesheet_link_tag 'yootheme.css', media: :all

Answer 1

您可以使用 sprockets#stub 和要在 application.css 文件中排除的文件名，以防止其加载：

*= stub yootheme.css

然后要手动合并它，您必须将文件添加到 assets.rb，重新启动服务器，然后使用 stylesheet_link_tag 帮助程序自行加载文件：

# config/initializers/assets.rb
# Rails.application.config.assets.precompile += %w( yootheme.css )

# view
= stylesheet_link_tag 'yootheme.css', media: :all

Answer 2

像这样

index.haml（布局） ..

- if action_name=="index"
   /* include both application.css and yootheme.css for index*/
   = stylesheet_link_tag 'application', 'yootheme.css', media: :all
- else
   /* include only application.css*/
   =stylesheet_link_tag 'application, media: :all

Answer 3

不要在 SASS/SCSS

中使用 require_tree

Sprockets provides some directives that are placed inside of comments called require, require_tree, and require_self. DO NOT USE THEM IN YOUR SASS/SCSS FILES. They are very primitive and do not work well with Sass files. Instead, use Sass's native @import directive which sass-rails has customized to integrate with the conventions of your Rails projects. https://github.com/rails/sass-rails

如果您没有使用任何 Sass 特性，例如变量、函数、混入等，您可以使用 require_tree。但是一旦你这样做，你就会意识到它们在任何文件中都不可用，除了在它们被声明的文件中。那是因为在 Sprockets 将文件连接在一起之前，SASS 编译器中的每个文件都是运行。

因此，您最好使用 @import 'foo' 并手动声明应将哪些文件及其添加到已编译样式表的顺序。

并没有听起来那么糟糕

默认资产管道设置是一个很好的尝试，让懒惰的程序员不要将所有内容都推到一个 css/js 文件中，同时仍将其编译为单个优化文件。它确实需要 require_tree . 才有意义。

我通常关闭资产生成器：

# config/application.rb
module MyApp
  class Application < Rails::Application
    config.generators do |g|
      g.assets false
      # or
      g.stylesheets false
    end
  end
end

相反，我故意将 app/assets 中的代码组织成模块。任何不是我的代码都会进入 /vendor.

您可以使用 glob imports 从库文件夹中导入 sass mixins 和变量 - 但它 cannot/should 不会替换 require_tree.

使用 content_for 而不是单独的布局

使用单独的布局意味着您必须复制整个文件才能更改一两行。

相反，您可以使用 content_for 在布局中制作动态块：

# application.html.haml:
!!!
%html
  %head
    %title My Rails app
    - content_for :assets
      = stylesheet_link_tag "application"
      = javascript_include_tag "application"
    = csrf_meta_tag

  %body
    = yield

然后在 index 模板中我们可以添加到 head 部分：

- content_for :assets
  = stylesheet_link_tag "some_other_file"

这将在 = javascript_include_tag "application" 下添加样式表 link，因为 content_for 将提供的块连接到已捕获的内容。使用 flush: true 丢弃任何先前提供的内容（按布局）。

- content_for :assets, flush: true
  = stylesheet_link_tag "some_other_file"

如何在 Rails 中的 application.scss 中排除加载 .css 文件？

How do I exclude a .css file from loading in application.scss in Rails?

css

ruby-on-rails

asset-pipeline

ruby-on-rails-5

不要在 SASS/SCSS

并没有听起来那么糟糕

使用 content_for 而不是单独的布局