I am not sure what I am missing, but I can only use nesting for in my rails files. I want to be able to use mixins and variables as well.
My gem file is the includes sass:
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'uglifier', '>= 1.0.3'
end
and my css files are name custom.css.scss. What am I missing?
From the Sass doc:
To install Sass in Rails 2, just add config.gem "sass" to
config/environment.rb. In Rails 3, add gem "sass" to your Gemfile
instead. .sass or .scss files should be placed in
public/stylesheets/sass, where they’ll be automatically compiled to
corresponding CSS files in public/stylesheets when needed (the Sass
template directory is customizable… see the Sass reference for
details).
I have to put the css files in a sass folder
I expect you're doing something like *= require_tree . in your application.css.scss file to include your stylesheets.
According to the official documentation, this won't work for mixins and variables:
If you want to use multiple Sass files, you should generally use the
Sass #import rule instead of these Sprockets directives. Using
Sprockets directives all Sass files exist within their own scope,
making variables or mixins only available within the document they
were defined in
It kinda sucks, but you need to include them all individually, if you want the mixins and variables to work. Including them using require compiles more quickly than using import, and should be preferred unless there are shared variables or necessary dependencies.
Example:
//= require navigation
//= require icons
//= require buttons
#import "variables.css.scss";
#import "mixins.css.scss";
#import "something_else.css.scss";
Related
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.
Hi I have been following Michael Hartl's book for developing rails applications. I have reached the end and I want to start using Bootstrap3 with the app I've developed.
I have followed the instructions on https://github.com/twbs/bootstrap-sass but this has not worked. The gem has installed correctly and I can get it to work on my local environment by changing my application.css --> application.css.scss and adding the import "bootstrap" statement to the file along with having it in custom.css.scss. This doesn't seem right and it doesn't work when I deploy to Heroku either.
The set up I am trying to get work is as follows.
Gem file
source "http://rubygems.org"
ruby '2.0.0'
gem 'rails', '4.0.1'
gem 'sass-rails'
gem 'bootstrap-sass'
gem 'bcrypt-ruby', '3.1.2'
gem 'faker', '1.1.2'
gem 'will_paginate'
gem 'bootstrap-will_paginate'
gem 'sprockets', '2.11.0'
gem 'pg'
gem 'uglifier'
gem 'coffee-rails'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder'
group :development, :test do
gem 'rspec-rails'
gem 'guard-rspec'
gem 'spork-rails'
gem 'guard-spork'
gem 'childprocess'
end
group :test do
gem 'selenium-webdriver'
gem 'capybara'
gem 'growl'
gem 'factory_girl_rails', '4.2.1'
end
group :doc do
gem 'sdoc', require: false
end
group :production do
gem 'rails_12factor'
end
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_self
*= require_tree .
*/
custom.css.scss
#import "bootstrap";
/*mixins, variables etc. */
$grayMediumLight: #eaeaea;
#mixin box_sizing{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* universal */
html {
overflow-y: scroll;
}
body {
padding-top: 60px;
}
...
...
Ideally I think I should be changing application.css to .css.scss and having importing bootstrap there without needing it in my custom.css.scss too. This is causing an error when deploying to Heroku, that is saying that application.css is already required.
UPDATE
As per the advice bellow I have removed
Import "bootstrap";
from custom.css.scss and added it to the renamed application.css.scss. This now looks like
#import "bootstrap";
#import "custom";
I cleared the tmp folder using
rake tmp:clear
and then refreshed the page.
Individually importing the css.scss files seems to have solved my problems
I would try the solution you proposed yourself, that is to use application.css.scss instead of application.css and use #import instead of require as mentioned in the rails guide:
If you want to use multiple Sass files, you should generally use the
Sass #import rule instead of these Sprockets directives. Using
Sprockets directives all Sass files exist within their own scope,
making variables or mixins only available within the document they
were defined in. You can do file globbing as well using #import "",
and #import "*/*" to add the whole tree equivalent to how
require_tree works. Check the sass-rails documentation for more info
and important caveats.
check sass-rails' documentation for more.
Try it maybe with
https://github.com/seyhunak/twitter-bootstrap-rails
Please note to choose the bootstrap3 branch, like
gem "twitter-bootstrap-rail", git: "git#github.com:seyhunak/twitter-bootstrap-rails.git", branch: "bootstrap3"
I am attempting to contribute to a rails app which has the following in the gemfile:
gem 'bootstrap-sass', '~> 2.3.2.2'
gem 'sass-rails', '>= 3.2'
It seems like everything works correctly in my layouts with the exception of columns:
<div class="col-md-6"> has no effect whatsoever on the content that it wraps.
However, if I add this line:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
To my <head>, the <div class="col-md-6"> works perfectly but several other bootstrap classes don't work, specifically around the navbar I have in place.
How can I get the effect of the above div class without including the following line?
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
Your problem is that your gemfile defines: bootstrap 2.3.2.2, and you are using syntax for bootstrap 3.0.0.
Note that the specifier ~> has a special meaning, best shown by example: ~> 2.3.2.2 is identical to >= 2.3.2.2 and < 2.4 (more info here).
CSS overrides anything that was written "before" the latest lines, so when you add the link in your layout, the CSS for bootstrap 3.0.0 overrides anything in your assets pipeline. Everything that continues working in your web app was simply not changed between these versions, everything that stops working was changed.
You can get what you want by using the syntax from the boostrap 2.3.2 refences guide. You will find the default grid system under the scaffolding link.
Did you import the bootstrap mixins? You'd need to add #import "bootstrap/theme"; to your application.css.scss file
Here's a link to that section of the docs.
Also, have you tried the bootstrap-sass-rails gem instead?
Step 1: include gem 'bootstrap-sass', '~> 3.3.6' and run bundle update
Step 2: in application.js file include
//= require bootstrap-sprockets
Step 3: in css file :
Make sure the file has .scss extension (or .sass for Sass syntax). If you have just generated a new Rails app, it may come with a .css file instead. If this file exists, it will be served instead of Sass, so rename it:
**app/assets/stylesheets/application.css app/assets/stylesheets/application.scss**
and remove all the lines from that and include
#import "bootstrap";
Step 4:rails run server