Search code examples
cssruby-on-railsruby-on-rails-5asset-pipeline

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

I have YooTheme and Bootstrap and they are interfering with each other. The designer used YooTheme for the home page and I don't have time to translate it. How do I include yootheme.css only for the index page, and exclude it from the header everywhere else? I have

application.haml - Layout 
/ 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
Solution

  • You can use sprockets#stub and the filename to exclude in your application.css file, in order to prevent its load:

    *= stub yootheme.css

    And then to incorporate it manually, you have to add the file to your assets.rb, restart your server, and load the file by yourself using the stylesheet_link_tag helper:

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

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