I use materialize css with Bower in Rails project and have a problem:
I try to change color of my footer in assets/stylesheet/main.sass:
footer
background-color: #004d40
But on the page default color of materialize footer in vendor/assets/bower_components/materialize/sass/components/_global.scss
overwriting my style
application.scss
/*
*= require_self
*= require_tree .
*/
$roboto-font-path: 'materialize/font/roboto/';
#import "materialize/sass/materialize.scss";
Try to #import matrialize first, but then *= require_tree . not loaded
You need to use #import in scss files. https://github.com/mkhairi/materialize-sass might be easier to use instead of bower for rails.
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
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";
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'
Why are my stylesheets in app/assets/stylesheets/ not being included by rails?
It's strange because my javasripts in app/assets/javascripts/ are getting included.
I thought all assets in those directories should already be handled by a commented
=require_tree . line in the CSS manifest file application.css.scss.
The line //= require name_of_asset in the application.js.coffee` seems to be working.
application.css.scss
#import "resets";
#import "bootstrap";
/*
*= require_self
*= require_tree .
*/
file directory tree
My actual full application.css.scss
#import "resets";
#import "bootstrap";
/* blanket styles */
#import "custom/cp_variables";
#import "custom/cp_custom";
#import "custom/cp_responsive";
/* plugin styles */
#import "spritz";
/*
*= require select2
*= require select2-bootstrap
*= require_self
*= require_tree .
*/
I am having problems loading the "socionics.css.scss" file, along with all of its siblings.
The files nested in the under the "custom" subfolder work fine, since I used #import for those.
Also, leaving off .coffee suffix for some js files is intentional.
You may benefit from SCSS globbing
This is one of our actual application.css.sass files (sass & scss use the same pre-processor, so will work on both):
#app/assets/stylehseets/application.css.sass
#import variables
#import jquery/**/*
This should work out of the box (I installed the sass-globbing gem, but turned out we didn't need it!)
--
Fix
For you, I'd try this:
#app/assets/stylesheets/application.css.scss
#import "resets";
#import "bootstrap";
/* Blanket Styles */
#import "*" /* not sure if this will work for base dir */
#import "custom/*";
/* Plugins */
#import "spritz";
#import "select2";
#import "select2-bootstrap";
--
Update
In terms of ordering, I would presume alphabetical, and seems to confirm it here:
CSS is order dependent, as such, using this approach within your
stylesheets to import styles that depend on the stylesheet's cascade
creates an opportunity for styles to change more unpredictably than a
manually asserted order. It is recommended that you only use globbing
where order is unimportant; E.g. importing of library files.
In my rails application's asset application.css I have the following line
/*
*= require foundation_and_overrides
*= require_self
*= require_tree .
*/
ul#mainmenu li {
background-color: $mainColor;
}
which includes the file foundation_and_overrides.scss where I defined the following variable
$mainColor: #eba10e;
But when I now try to use this variable directly in my application.css file, it is not translated to #eba10e, so I get lines like this one in the resulting css file:
background-color: $mainColor;
So my question, how can I use the variable in my application.css file?
No, pure CSS does not support variables.
But it will work, if you rename it to application.scss. After that it will be compiled with Sass. CSS is always valid SCSS, so this will work without problems.
Additionally you have to use the #import statement instead of require, so the other files will be imported the ”SASS way“.