I have installed these gems : font-awesome-rails and bootstrap (gem 'anjlab-bootstrap-rails', :require => 'bootstrap-rails',
:github => 'anjlab/bootstrap-rails')
In my application.css.scss, I have
*= require twitter/bootstrap
*= require_self
*= require_tree .
*/
#import "font-awesome";
#import "font.css.scss";
where the last file contains #import url("//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"); The problem, is that no icon is loaded in my html because fontawesome seems not to be fetched. So I installed the font-awesome gem, but it didn't change anything. Could someone help ?
Can you try this one in your Gemfile (outside of the assets group)? gem 'font-awesome-rails', '4.0.1.0' After you bundle install, make any change (i.e. add an empty line) to your application.css.scss to get it to re-compile.
Related
I am trying to incorporate bootstrap 4 into my Rails 5.2 project. Currently, my app/stylesheets/application.css, has the following in it:
/*
*= require_tree .
*= require_self
*/
The instructions, in addition to renaming it application.scss, call for deleting:
*= require_tree .
*= require_self
And adding:
#import 'bootstrap'
Isn't "require_tree ." needed to include all the stylesheets in the stylesheets folder? and the "require_self", to include any styles I may decide to add in the application.scss file?
So if I remove these two statements, would I need to include every single stylesheet individually, using an #import statement. For instance, if I have: user.scss, I would add:
#import 'user'
I've seen some examples where the require_tree and require_self are kept. Your advice is appreciated.
use asterisk to path like
#import "path/to/*"
if you add all sxss in 'stylesheet' path (ex: stylesheet/a.sxss, b.sxss)
#import "*"
else you add all sxss in 'stylesheet/page' path (ex: stylesheet/page/a.sxss, b.sxss)
#import "page/*"
I've just created a brand new Rails app (5.0.1). In this Rails app I want to use Bootstrap 4. I have done it before and it is usually straight forward, but this time I'm having some issues. Some styling are off / overridden for some reason. I haven't added any custom styling myself yet beside installing:
gem 'bootstrap', '~> 4.0.0.alpha6'
See the image below for what I mean:
The button text should be white as default but when I inspect the element I can see that it is not working.
Beside adding gem 'bootstrap' to my gemfile I've also done the following:
application.scss
#import "bootstrap/variables.scss"; // I haven't tweaked any of the variables yet.
#import "bootstrap";
And application.js:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require tether
//= require bootstrap
I'm using Rails 5.0.1 and bootstrap', '~> 4.0.0.alpha6'.
Any ideas on why it isn't working?
It looks like you have more than one version of bootstrap working, maybe bootstrap 3 is overriding bootstrap 4.
If you are working with some bootstrap template, check if bootstrap is on its dependencies folder and choose if you want to delete that or the gem.
Other thing that could be the problem: Only use imports and not include in your application.scss
other thing: you have a rule for links that seems to be overriding the text color from white to black, add an '!important' to override it
It's been a while since I've developed in Rails and I'm having trouble getting any scss stylesheet to work on my freshly created rails app.
layouts/application.html.erb has the default <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> at the top.
For testing purposes, I created a main.scss file in assets/stylesheets/ that looks like this:
* {
border: 1px solid black;
}
I thought the application.scss file is supposed to grab all the stylesheets in it's folder and child folders but it's not. (Oddly, the .js files load just fine.)
I've tried RAILS_ENV=production rake assets:precompile but it didn't do anything. Could someone explain what it even does?
I've tried adding *= require main and *= require main.scss to application.scss. I even changed the file ext to css for both files. The only way I've gotten any css to render is by directly adding the code to application.scss, which I don't want to do.
Please help me with this.
EDIT 1
I'm going to add some more info since I'm getting generic answers. I mentioned that it's a fresh rails app so the basic things are already pre-generated. This is how my application.scss looks:
/*
* 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, vendor/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 styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree .
*= require main
*= require_self
*/
Still, nothing works
/*
*= require_tree .
*= require_self
*/
Add the above to your application.scss or application.css.scss file
Looks like the only way I can get it to work is by adding #import main; to application.scss. It seems like the styles end up being used on every page (is this the default in rails?).
This is not my ideal solution but it's the only thing I've been able to do to get any styles to work via requiring methods.
in your application.css, try adding
*= require main
*= require_self
hope this helps
I could not get the above answers to work but I think I found an easy work-around that makes Rails act the way expected.
In your HEAD section add
<%= stylesheet_link_tag params["controller"], media: 'screen' %>
And now css/SASS/Scss files in app/assets/stylesheets/ will load.
Sadly, you'll still need to precomile things. Grr.
I thought the application.scss file is supposed to grab all the
stylesheets in it's folder and child folders but it's not. (Oddly, the
.js files load just fine.)
By adding *= require_tree . to application.scss I think it should load all of the files recursively like you expect.
When Using Rails 4:
Make sure your Gemfile is using the sass-rails gem
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
You've created app/assets/stylesheets/main.scss, great!
Now update application.scss to include it:
#import "main";
You'll also need to include various gem stylesheets this way too:
#import "bootstrap";
You shouldn't have an application.css file - if you made one, remove it.
It's a bad practice to include stylesheets recursively, since order does matter, and conflicting styles will cascade, thus clobbering each other. I don't have an answer to your question on recursion, since it's not something I've done since upgrading to Rails 4
For me this was the solution
Is to link css file to your root
Also make sure your application.html.erb has this line:
<%= stylesheet_link_tag 'application', media: 'all' %>
In my case with Rails 6, the styles from app/javascript/stylesheets couldn't be loaded in production (Heroku). The styles were only work in development.
So I add this gem in Gemfile and install it.
gem 'jquery-rails'
Then my app can load the styles both in development and production environment.
Similarly to this issue:
rails: any change to custom.css.scss make the app crash
I have made a change to my custom.css.scss file and all the bootstrap references to colors stopped working. I have manually entered the hex values for these colors now and the app loads, but the classes for my navbar are now not working.
It seems that I have a problem referencing any of the bootstrap classes now for some reason. I also do not understand why making a minor change to a stylesheet has sent my bootstrap styles into a meltdown. I think I must have a setup problem elsewhere.
custom.css.scss:
#import "bootstrap";
/* mixins, variables, etc. */
$grayMediumLight: #eaeaea;
$gray-darker: #222;
$gray-dark: #333;
$gray: #555;
$gray-light: #999;
$gray-lighter: #eee;
Relevant gems
gem 'rails', '4.0.2'
gem 'bootstrap-sass', '2.3.2.0'
gem 'sprockets', '2.11.0'
gem 'sass-rails', '4.0.1'
gem 'uglifier', '2.1.1'
gem 'coffee-rails', '4.0.1'
gem 'jquery-rails', '3.0.4'
gem 'turbolinks', '1.1.1'
In addition to this, I recently added the bootstrap.css and bootstrap.min.css file to vendor/assets/stylesheets and the same .js files to use a collapsing panel class.
Any help much appreciated.
application.css:
/*
* 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, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, 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 top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require bootstrap.min
*= require_self
*= require_tree .
*/
UPDATE:
So I removed and then re-included the bootstrap.css and bootstrap.min.css files and the main navbar styles came back to life. The only things that are still not working are the references to colors and the styles for my drop-down list in the navbar.
removing bootstrap files from the vendor/assets/javascript and vendor/assets/stylesheets folders solved this issue for me too.
I'm trying to use bootstrap-sass (3.1.0.2) and sass-rails (4.0.1) in my rails (4.0.0) project.
My application.css.scss file looks like this:
/*
* 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, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, 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 top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require font-awesome
*= require_tree .
*/
My bootstrap_and_overrides.css.scss file is in the stylesheets folder and looks like this:
#import "bootstrap";
I have a test page set up to try it out with this:
<div class="container">
<h2>test terms</h2>
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<p class="bg-primary">.dfd..</p>
<p class="bg-success">..sdfas.</p>
<p class="bg-info">..sdfs.</p>
<p class="bg-warning">.asdf..</p>
<p class="bg-danger">.adf..</p>
<p>test terms</p>
<button type="button" class="btn btn-primary">Default</button>
</div>
<button type="button" class="btn btn-info">Info</button>
When I start the server and visit the page, it renders in plain text without the bootstrap styling.
Any ideas on what to do would be appreciated. It seems a few people on here don't use the gems. Is there a reason for this approach? Thanks very much!
I faced nearly the same problem few days ago. My configuration was quite the same but only few styling effects of Bootstrap were not working (especially the bg-whatever-color). After few gems updated the problem disappear.
Some of my gems that I updated
gem 'rails', '4.0.3'
gem "bootstrap-sass", "~> 3.1.1.0"
gem 'font-awesome-sass'
gem 'sass-rails', '~> 4.0.0'
Don't forget the:
bundle update
Part of my application.scss to give you an idea
*= require jquery.ui.all
*= require select2
*= require font-awesome
*/
#import "mixin_and_var";
// changing the breakpoint value before importing bootstrap style
// This change is made for the menu (navbar) to collapse on tablet for better view
$screen-sm:1024px;
#import "bootstrap";
#import "general_layout";
#import "header";
#import "footer";
#import "menus";
#import "pagination";
#import 'login';
#import "error";
Hope it helps!
Here's my setup with https://github.com/twbs/bootstrap-sass:
# Gemfile
gem 'bootstrap-sass'
# application.css.scss
/*
*= require_self
*= require vendor
* require_tree .
*/
#import "bootstrap";
// Import individual stylesheet
#import "base"; /* app/assets/stylesheets/base.css.scss */
#import "events"; /* app/assets/stylesheets/events.css.scss */
require_tree . is disabled, but importing individual CSS files (base, events) instead.