Is it possible to do this?
../application.css
*= require_tree .
*= require after_tree.css
All my .css files in the same directory.
I want to load after_tree.css to be able to rewrite the rules that was loaded in others .css by require_tree .
You have to require_self
/*
*= require_tree .
*= require_self
*/
*= require_self inserts the content of the file itself (after the directives). This is often useful when you want to make sure that JavaScript code from a manifest comes before any other code that is loaded with require_tree. We see an example of that in the default application.css.
You can't. You need to not use require_tree, but load them all individually if you want to control the order.
You could put all the files whose order you don't care about in a subdir, then require_tree ./subdir instead of require_tree. The require any files you do care about the order of after that.
To maintain the order you need to explicitly require like this:
*= bootstrap.css
*= override_bootstrap.css
*= my_style.css
*= require_tree .
Related
I have an application in rails 6 that requires bootstrap.
Bootstrap is being loaded at application.css
/*
*
*= require bootstrap
*= require jquery-ui
*= require font-awesome
*= require_tree
*= require_self
*/
I created a folder /stylsheets/admin where I keep my admin css. There, unless I import bootstrap again, its does not apply to the admin layout
admin_layout.scss:
#import "font-awesome";
#import "bootstrap";
#import "admin";
However that causes bootstrap to appear twice when the page loads. My question here is: what is the proper way to do this? I've solved it in a few ways but none of then feel 'right'.
Solution 1: I removed the 'require bootstrap' from application.css. Since the 'require_tree' loads all files and folders inside stylesheets/ bootstrap applies to application. If I add more layouts that will be an issue however.
Solution 2: (even worse) to move admin_layout.css outside of stylesheets/ so that 'require_tree' does not load it.
I've looked about and didnt find the 'proper way' to do it. What am I missing?
You can try using the stub directive after require_tree
/*
*
*= require bootstrap
*= require jquery-ui
*= require font-awesome
*= require_tree
*= require_self
*= stub admin_layout
*/
https://github.com/rails/sprockets#stub
Similar question has been answered already Asset Pipeline: excluding an admin.css file
There are already similar questions on SO, but not enough clear responses to understand the following issue.
My goal is to setup Rails 5 with Bootstrap using Bower.
Using Bower I installed Bootstrap in the the folder:
vendor/assets/bower_components/bootstrap-sass
Then, I updated initializers/assets:
Rails.application.config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')
Then I added the gem 'sass-rails' to Gemfile and updated application.js:
//= require jquery
//= require bootstrap-sass/assets/javascripts/bootstrap
//= require jquery_ujs
//= require turbolinks
//= require_tree .
The assets for JS seem to be working well: if I load http://localhost:3000/assets/application.js
I can see that the Bootstrap JS part has been added there.
The problem is about Sass (SCSS):
I added bootstrap-sass/assets/stylesheets/bootstrap into application.css.scss but with no success:
/*
*= require_tree .
*= require_self
#import "bootstrap-sass/assets/stylesheets/bootstrap";
*/
in fact if I load http://localhost:3000/assets/application.css I see:
/*
#import "bootstrap-sass/assets/stylesheets/bootstrap";
*/
(the folder specified on the #import is containing many _*.scss files and a mixins folder)
The questions are:
Do you have any ideas why this is not working?
should not I see on assets/application.css all the CSS precompiled?
PS:
Any resource to understand the issue would be much appreciated.
Move the import, so it's outside the /* .. */
/*
*= require_tree .
*= require_self
*/
#import "bootstrap-sass/assets/stylesheets/bootstrap";
[Removed misleading instructions to use require instead of import, as I was wrong.]
In addition to the accepted answer, if you look into the bootstrap-sass/assets/stylesheets directory, you'll notice that there is no file bootstrap.scss but rather one prefixed with an underscore.
Also, usually it's better to import only modules you actually need from the bootstrap-sass/assets/stylesheets/bootstrap/ directory instead of the main _bootstrap.scss file.
I want to use a bootstrap-theme for my rails project, for example a theme from bootswatch: http://bootswatch.com/superhero/
Currently, bootstrap is integrated in my project via Bower:
Bowerfile:
asset 'bootstrap-sass-official'
Application.css
*= require 'bootstrap-sass-official'
The Documentation on Bootswatch says that to use a bootstrap theme, is to download the theme and to replace it with the existing bootstrap-file. Since I used bower to get bootstrap, there is no file to replace with.
What do I need to do, to use the Bootstrap-Theme?
EDIT:
I added superhero.css to stylesheets and added it to application.css:
*= require_tree .
*= require_self
*= require 'bootstrap-sass-official'
*= require 'superhero'
If your theme is having customised bootstrap then you can use bower. You need to download the bootstrap file from your theme and put in app/assests/stylesheets
and then call it in application.css
*= require 'bootstrap'
I know that all of these will be compiled together into one file but the order of this is very important for me when compiling the stylesheet as it determines whether the layout is completely messed up or not.
Also, how do I change the order for this?
assets/stylesheets/application.css
/*
*= require jquery-ui
*= require css-sprites
*= require formtastic
*= require style
*/
lib/stylesheets/lib.css
/*
*= require reset
*/
Is there a way I can load specifically the reset.css I have in my lib/assets/stylesheets folder before my application.css? or perhaps I could call it from within the file itself somehow? I've tried but I can't get it to work.
I personally have an application folder in every of these 3 folders where I put all the files I want included in every pages.
Then I have an application_vendor.css in vendor where I do require_tree ./application.
Same for lib, application_libs -> require_tree ./application
And then in your application.css that you include in the layout, you can do:
/*
*= require_self
*= require application_libs
*= require application_vendor
*= require_tree ./application
*= require other_stuff
*/
That way you can choose the order.
In the Rails docs for the asset pipeline, it states:
The default behavior in Rails 3.1 and onward is to concatenate all
files into one master file each for JS and CSS. However, you can
separate files or groups of files if required (see below)
How exactly do you separate the files into groups as indicated? For example, if I've got an application that also has an admin area, I'd like to create three compiled files:
shared.css (both front- and back-end use this)
application.css (front-end only)
admin.css (back-end only)
The default combines all my files into application.css.
You will need to create a manifest for each area. For example:
admin.css:
/*
*= require shared/nomalize
*= require shared/960.css
*= require admin/base
*= require admin/tables
*/
shared.css:
/*
*= require shared/nomalize
*= require shared/960.css
*= require public/base
*= require public/branding
*/
You are free to make folders to hold shared, public and admin CSS and require these as required. You will have to remove require_tree directives from any manifests
Reference these in your layouts:
<%= stylesheet_link_tag "application" %>
<%= stylesheet_link_tag "admin" %>
and add the addittional manifests to the precompile array:
config.assets.precompile += ['admin.js', 'admin.css']
Apparently, my reading comprehension is quite lacking (tl;dr). It seems that when you use
stylesheet_link_tag 'application'
I looks to app/assets/stylesheets/application(css|sass) for a manifest file that defines which sheets to include.
So I can just use
stylesheet_link_tag 'admin'
In my back-end to look for that manifest. So here's how my assets structure ends up looking:
/app
/assets
/stylesheets
admin.css
application.css
/admin
screen.css
/application
screen.css
/shared
layout.sass
reset.css
typography.sass
admin.css and application.css are my manifests, and they look like this respectively:
/** admin.css
*= require_self
*= require shared/reset
*= require shared/layout
*= require shared/typography
*= require admin/screen
*/
/** application.css
*= require_self
*= require shared/reset
*= require shared/layout
*= require shared/typography
*= require application/screen
*/
You can see that each just references the shared sheets and then requires the context-specific sheet.