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.
Related
Hello I am learning rails, I am suddenly getting this error message in my new project,
Invalid CSS after "...kground-color: ": expected expression (e.g. 1px, bold), was "#gray-lightest;"
here is my Application.scss
/*
* 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.
*
*/
#import "bootstrap-sprockets";
#import "bootstrap";
#import "home.scss"
then I have a home.scss
#gray-lightest: lighten(#000, 97.25%);
body {
background-color: #gray-lightest;
}
and I have in my gemfile
gem 'sass-rails', '5.0.6'
gem 'bootstrap-sass', '3.3.7'
gem 'jquery-rails', '4.3.1'
gem 'haml-rails'
I have seen already the sass solutions but i want to use scss or css. I've tried updating the bundler and all the gems. My other projects is doing fine. What could i have done wrong this time? why am i getting this error? is the .scss extension not working? Thanks for any help.
SCSS support this syntax to set variable:
$gray-lightest: lighten(#000, 97.25%);
body {
background-color: $gray-lightest;
}
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.
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'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.
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";