Getting around to using sass in my latest rails project, specifically the bootstrap-sass gem to get all of twitter bootstrappy goodness.
Is it possible to reference the variables already defined? The vendor /assets/stylesheets/bootstrap/_variables.scss file contains declarations for colors.
$blue: #049cdb !default;
$blueDark: #0064cd !default;
$green: #46a546 !default;
$red: #9d261d !default;
Do I need to redefine these in the top of my base application.css.scss file or can I import/reference the variables file? I've tried a couple of approaches like this:
$bodyBackground: $black;
#import 'bootstrap'
But that errors out with undefined variable $black.
First, define the variable $black:
$black: #000;
$bodyBackground: $black;
#import "bootstrap";
or change it to:
$bodyBackground: #000;
#import "bootstrap";
Remove the below two lines from application.scss file:
*= require_self
*= require_tree .
Related
I have installed bootstrap 4.5 into RAILS 6 and I want to extend some styles.
For that I have a file named banana.scss in app/assets/stylesheets that looks like this :
.form-read-only {
#extend .form-control, .form-control-sm;
background-color: rgb(233, 236, 239)
}
Now I want to embed this stylesheet after bootstrap is loaded, so I have modified the app/assets/stylesheets/application.css by
/*
...
*= require banana
*= require_tree .
*= require_self
*/
#import 'bootstrap';
#import 'banana';
But this leads to the error message in the browser to :
Error: The target selector was not found.
Use "#extend .form-control-sm !optional" to avoid this error.
on line 5 of app/assets/stylesheets/banana.scss
>> #extend .form-control, .form-control-sm;
But what is the remmmended way to extand bootstrap ?
I think the only issue is that you *= require banana before you #import 'bootstrap'. Try removing the first one:
/*
...
*= require_tree .
*= require_self
*/
#import 'bootstrap';
#import 'banana';
I've found an easy way to accomplish that.
Just import the bootstrap on the beginning of my custom stylesheet:
#import 'bootstrap';
.form-read-only {
#extend .form-control, .form-control-sm;
background-color: rgb(233, 236, 239)
}
Because I can't define the order in which the stylesheet files are loaded, here I'm sure when the custom stylesheet is loaded, in front of the depending bootstrap stylesheets are loaded at first.
This is a continuation of rails, bootstrap, media-breakpoint-only but I don't think one needs to refer back to that.
I have a Rails project in which I am attempting to use the Bootstrap function media-breakpoint-only.
A search of my computer shows that media-breakpoint-only is defined in ~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-4.1.3/assets/stylesheets/bootstrap/mixins/_breakpoints.scss
My ~/app/assets/stylesheets/application.scss is
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
* require_tree .
* require_self
*/
// See
// https://www.youtube.com/watch?v=vcBXXOdPfgE&index=8&list=PLYM1n9xxMy4ClO2GjX73U3BLsXx9Z7wh5
$navbar-default-bg: red;
// Shnelvar
// See https://github.com/twbs/bootstrap-sass
#import "bootstrap-sprockets";
// Custom bootstrap variables must be set or imported *before* bootstrap.
#import "bootstrap";
// Shnelvar
// For ralph-shiny-button etc.
#import "ralph";
// Shnelvar
// See https://stackoverflow.com/questions/33404154/bootstrap-change-the-navbar-font-size
// See https://teamtreehouse.com/community/how-do-you-change-the-bootstrap-font-style
.nav a{
color: white !important;
// font-size: 3.8em !important;
font-size: 2.8em;
}
#import "bootstrap/breakpoints";
// See https://getbootstrap.com/docs/4.0/layout/overview/
h1 {
#include media-breakpoint-only(xs) {
color: red;
}
#include media-breakpoint-only(sm) {
color: green;
}
#include media-breakpoint-only(md) {
color: blue;
}
#include media-breakpoint-only(lg) {
color: yellow;
}
#include media-breakpoint-only(xl) {
color: orange;
}
}
Please note that I have
* require_tree .
* require_self
and not
*= require_tree .
*= require_self
so, I believe, the "requires" are commented out.
When I attempt to load my webpage I get the following error:
Sass::SyntaxError in StaticPages#root
Showing ~/app/views/layouts/application.html.erb where line #15 raised:
File to import not found or unreadable: bootstrap/breakpoints.
Load paths:
~/app/assets/config
~/app/assets/images
~/app/assets/javascripts
~/app/assets/stylesheets
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/coffee-rails-4.2.2/lib/assets/javascripts
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/jquery-rails-4.3.3/vendor/assets/javascripts
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/actioncable-5.2.0/lib/assets/compiled
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/activestorage-5.2.0/app/assets/javascripts
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/actionview-5.2.0/lib/assets/compiled
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/turbolinks-source-5.1.0/lib/assets/javascripts
~/node_modules
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-sass-3.3.7/assets/stylesheets
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-sass-3.3.7/assets/javascripts
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-sass-3.3.7/assets/fonts
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-sass-3.3.7/assets/images
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-sass-3.3.7/assets/stylesheets
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-sass-3.3.7/assets/javascripts
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/popper_js-1.14.3/assets/javascripts
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-sass-3.3.7/assets/stylesheets
~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-sass-3.3.7/assets/stylesheets
Apparently, ~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-4.1.3/assets/stylesheets/bootstrap/mixins/ isn't in any of the load paths.
I'm thinking I might have an rbenv error but I'm not sure.
My environment is
Rails 5.2.0
ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-linux]
Please further note that if I get rid of the #import "bootstrap/breakpoints"; and the h1 css that I am able to use a Bootstrap navbar successfully. Thus, I assume, I have installed bootstrap sucessfully.
Help!!!
in gemfile
gem 'bootstrap-sass', '~> 3.2.0’
then do file inside the stylesheet assets name it bootstrap_and_overrides.css.scss
#import "bootstrap”;
This video can help you about how to add bootstrap gem to your ruby on rails app
https://www.youtube.com/watch?v=mxYsMacHHtU&t=122s
I have a Rails 4 app, using the foundation-rails v5.2.1.0 gem, and one custom SCSS file for my application layout. When I use a variable from the foundation_and_overrides.scss file, I get the following error:
Undefined variable: "$header-font-family"
I've included relevant code below. I can post more if needed. Anyone know what's going on here?
From application.css:
*
*= require foundation_and_overrides
*= require_self
*= require_tree .
*/
From foundation_and_overrides.scss:
// We use these to control header font styles
$header-font-family: "futura-pt", sans-serif;
$header-font-weight: 400;
// $header-font-style: normal;
From custom.css.scss:
$include-html-global-classes: false;
#import "foundation/components/global";
.
.
.
.footer {
background-color: black;
color: white;
height: 100px;
font-family: $header-font-family;
}
You are getting the error because foundation_and_overrides.scss is executing after custom.css.scss. Best way to do this is to define your variables in a partial and import it in your main stylesheet after foundation.
First change the file name from
foundation_and_overrides.scss to _foundation_and_overrides.scss
and then import it in custom.css.scss file after foundation with
#import 'foundation_and_overrides';
Update
Rename your application.css to application.css.scss and custom.css.scss to custom.scss
In your application.css.scss remove *= require_tree .
And then import your main stylesheet with
#import 'custom'
I hope this helps
The cleanest way is to add the line
#import "custom";
to your file foundation_and_overrides.scss before the line
#import "foundation";
There's no need to remove *= require_tree . from application.css.scss as stated in the accepted answer. There's also no need to add require foundation_and_overrides to application.css if you leave require_tree . in there.
According to the Rails Docs:
If you want to use multiple Sass files, you should generally use the Sass >#import rule instead of these Sprockets directives. When using Sprockets >directives, Sass files exist within their own scope, making variables or >mixins only available within the document they were defined in.
So in this case the order of the directives (the lines in application.css that start with *=) doesn't matter because each of those files lives in its own scope and you can't access their variables from another scss file. That's why you want to either #import foundation_and_overrides and then custom, or #import your custom stylesheet into foundation_and_overrides.
In the stylesheets/bootstrap directory I have:
_variables.scss I have:
$black: #000 !default;
$grayDark: #333 !default;
...
$textColor: $grayDark !default;
This file is imported in the bootstrap.scss file:
// Core variables and mixins
#import "bootstrap/variables"; // Modify this for custom colors, font-sizes, etc
#import "bootstrap/mixins";
...
In the stylesheets directory I have bootstrap_include.scss
#import "bootstrap/bootstrap";
#import "bootstrap/responsive";
I want to override the default text to be black, so I create a custom variables file and imported it in my custom bootstrap file
_variables_custom.scss:
$black: #000 !default;
$textColor: $black !default;
and then in bootstrap_custom.scss
#import "variables_custom";
Finally in the application.css.scss
*= require bootstrap_custom
*= require bootstrap_include
When I refresh the page, bootstrap_custom is always empty, I'm a css newbie, and why it isn't working?
Thanks
NOT SURE IF THIS IS NICE BUT I SOLVED IT USING:
my bootstrap_custom now includes
$black: #000 !default;
$textColor: $black !default;
#import "bootstrap/bootstrap";
#import "bootstrap/responsive";
and my application.css.scss now only includes
*= require bootstrap_custom
in your stylesheet, remove !default
that is, in your file _variables_custom.scss - instead of:
$black: #000 !default;
$textColor: $black !default;
use this instead:
$black: #000;
$textColor: $black;
!default is a sass variable flag that allows for reassignment before or after the !default is declared, with the non !default value always winning.
so:
$foo: black;
$foo: red !default;
body { background: $foo; }
will result in a black body background, even though red is declared after black
While we are talking about variables, there's nothing related to CSS. Variables, in this case, are used by SASS/Compass a CSS preprocessor tool, used by Rails to make the use of CSS more easy (eg. by using variables).
So when you insert your variables in a file, and let it be processed alone, it wont produce any CSS code unless you make any use of then in a valid CSS attribute.
If you want to test it, add to your bootstrap_custom.css something like:
body {
background-color: $black;
}
And you will see your $black variable being used.
I am using bootstrap-sass and the font-awesome ( https://github.com/littlebtc/font-awesome-sass-rails) gems. I would like to override the bootstrap font setting from that of font-awesome.
From font-awesome's site I can override the bootstrap defaults, if I just import if after bootstrap's import.
#import 'bootstrap';
#import 'font-awesome';
I have done the above, but font-awesome's font is not overriding. I have pushed my project on github - https://github.com/murtaza52/rails-base. The url is accessible on localhost:3000/posts
I will appreciate if someone can help me overriding bootstraps's default font with those of font-awesome's
Modify your application.css.scss to look like below
#import "font-awesome";
$baseFontFamily: 'FontAwesome';
#import "bootstrap";
...
#import "bootstrap-responsive";
//#import "scaffolds";
#import "posts";
WHY?
You move import "font-awesome" at the top and then define baseFontFamily because that's what bootstrap uses to define font-family for all the elements. Check Typography and links block in the middle. If you import bootstrap after this, FontAwesome will be used by default.
You should remove import "scaffolds"; line because scaffolds.css.scss will reset your font family for body element which will be inherited by every other element.
If you can't avoid importing it before bootstrap. I hope that helps.
For those of you guys using Bootstrap 3.2+ (I guess), here's the list of SASS variables you can modify:
https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss
In our case, we want to make sure to define $font-family-base before doing #import "bootstrap".
By setting $font-family-base before the line below is reached, Bootstrap uses our $font-family-base instead (otherwise, it defaults to $font-family-base-serif, also defined in the variables.scss above).
$font-family-base: $font-family-sans-serif !default;
This is how my application.css.sass looks like
/*
*= require_tree .
*= require_self
*/
#import "fonts"
#import "compass"
#import "bootstrap"
And I have the following in _fonts.css.sass (You don't have to have it in a separate file)
$font-family-sans-serif: 'Roboto', verdana, arial, sans-serif
I don't know if this helps you but at least sometimes when template code seems valid you need to force refresh your browser with ctrl+shirt+r to see changes (works at least in mozilla).