newBike
newBike

Reputation: 15002

Change css files loaded order in Rails

I want to write some new css style in custom.css.scss to overwrite some style.

But I found I couldn't over-write the external files under /vendor/themes

How could I make high priority for my custom.css.scss, Thanks

Application.css

 *= require news
 *= require photo
 *= require_self
 *= require custom

Application.rb

  class Application < Rails::Application
    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration should go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded.

    config.assets.paths << "#{Rails.root}/vendor/themes"

Upvotes: 0

Views: 987

Answers (1)

Tourki
Tourki

Reputation: 1774

In the rails doc for Assets Pipeline:

Besides the standard assets/ paths, additional (fully qualified) paths can be added to the pipeline in config/application.rb. For example:

config.assets.paths << Rails.root.join("lib", "videoplayer", "flash")

Paths are traversed in the order they occur in the search path. By default, this means the files in app/assets take precedence, and will mask corresponding paths in lib and vendor.

It is important to note that files you want to reference outside a manifest must be added to the precompile array or they will not be available in the production environment.

So your custom css is actually overriding the vendor css. But maybe there is some rules in the vendor that have greater css prority (more css selectors for example) and that's why they don't get overridden.

Upvotes: 3

Related Questions