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
Related
I am trying to migrate to Bootstrap 4 in my Ruby on Rails project, following the github installation guide
It recommends that in my application.scss file, I remove *= require_tree
However, when I do this, none of my custom CSS files appear. If require_tree DOES tell the asset pipeline to include all of the specified files in the directory, how else would the asset pipeline know to do this?
I've been trying to find an answer to this problem and haven't found anything.
OK, you would try to work with css and scss at a time, Right? You can do this the several ways like if you need to use only one file like application.scss then you can rename the file again e.g application.css.scss then for scss you would follow this
#import "bootstrap";
...
then for custom css above in the #import variable
/*
*= require custom
*= require custom_another
*/
make sure this custom file is formatted with .css and it's inside assets/stylesheets folder.
For saas file will use #import & for css file will use *= require.
Now if you need to use separate files for css & scss then it would look like this application.css
/*
*= require custom
*= require_tree .
*= require_self
*/
you can leave that application.css and for scss you can create a custom file inside assets/stylesheets like custom.scss then
#import "bootstrap";
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'
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 .
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.