I'm using bourbon and Neat with rails application.
I can't make Neat run, one of the most common error that I get is:
error stylesheets/sass/neat/functions/_private.scss (Line 48: Invalid CSS after "... $grid-columns ": expected "}", was "!global !default;")
(and if I comment this line will be just another line)
I'm using Neat 1.5.1 with sass-rails
This is my gem file:
# Use SCSS for stylesheets
gem 'sass-rails', '>= 4.0.2'
gem 'leaflet-rails'
gem 'bourbon'
gem 'neat', '1.5.1'
I have
#import "bourbon/bourbon";
#import "grid-settings";
#import "neat/neat";
#import "setting";
in my main.scss
and
#import "main";
in my application.css.scss
If I put neat in application.css.scss I get "Undefined Mixing Error"
I already did bundle install, re-start the serve and clear the cache.
This might help you, seems like this is a known issue: https://github.com/thoughtbot/neat/issues/170
Seems the main problem was the sass/neat folder.
If you're using the gem, you don't have to create one, is just for project without Ruby And Rails.
Is just not very clear in the instruction :)
Related
I am getting the following error. According to my R&D i believe it is producing because of bootstrap-sass but how can i resolve it I have tried very hard but still unable to get something.
ruby -v = 1.9.3
rails = 3.2.2
GemFile
"bootstrap-sass", "~> 2.0.0" # this is out of assets group
ActionView::Template::Error (File to import not found or unreadable: bootstrap.
Load paths:
/var/www/eventdid
/var/www/eventdid/vendor/bundle/ruby/1.9.1/gems/activeadmin-0.4.4/app/assets/stylesheets
/var/www/eventdid/vendor/bundle/ruby/1.9.1/gems/compass-0.12.6/frameworks/compass/stylesheets
(in /var/www/eventdid/app/assets/stylesheets/site.css.scss)):
I have been digging my head into this issue from hours and hours. Looking forward help from you guys.
Thanks
If you are not using pre-compiled assets you should move your
gem 'sass-rails'
also out of your assets group.
Also worth checking, you should use scss in your application.css.scss
#import "twitter/bootstrap";
#import "twitter/bootstrap-responsive";
I'm trying to use the bootstrap_form ~> 2.0.1 gem (see https://github.com/bootstrap-ruby/rails-bootstrap-forms) but it's giving me fits. I've installed is as per the instructions on their github page, adding it to my Gemfile:
gem 'bootstrap_form', '~> 2.0.1'
I ran bundle install. I then added it to my application.css.scss file:
*= require_self
*= require rails_bootstrap_forms
*= require_tree .
But, when I try to run my app I get:
couldn't find file 'rails_bootstrap_forms' (in /path/to/my/app/assets/stylesheets/application.css.scss:12)
I'm obviously missing something. I checked lib/assets/ and vendor/assets/stylesheets/ but there's nothing there. Likewise, there's nothing in app/assets/stylesheets/.
What the fudge?
I had some trouble with this, partly (I think) because they renamed the gem. What seemed to make the difference for me was to have bundle grab the latest gem from github, by putting this into my Gemfile:
gem 'bootstrap_form', github: 'bootstrap-ruby/rails-bootstrap-forms'
I use bootstrap-sass, so I didn't want to mess around with application.css, so I made sure the following import statements were in application.css.scss, like this:
#import "bootstrap";
#import 'rails_bootstrap_forms';
It's also quite important to remember to restart the server after making these changes!
You have got to create the file rails_bootstrap_form.css in app/assets/stylesheets
.rails-bootstrap-forms-date-select,
.rails-bootstrap-forms-time-select,
.rails-bootstrap-forms-datetime-select {
select {
display: inline-block;
width: auto;
}
}
.rails-bootstrap-forms-error-summary {
margin-top: 10px;
}
I had this problem and found that I'd mistyped the Gemfile entry as bootstrap-form. I corrected it to bootstrap_form and all was well.
Have you installed Bootstrap? Looks like that is a requirement of bootstrap_form, but it's not included as a dependency in the gem which means you need to manually install Bootstrap.
One popular way to do this is with the twitter-bootstrap-rails gem. The simplest way to install this is to include gem "twitter-bootstrap-rails" in your gemfile, and then run
$ bundle install
followed by
rails generate bootstrap:install static which should add the required CSS files to your assets folder.
I was getting the same error so I took out *= require rails_bootstrap_forms from application.css.scss and was able to compile and deploy without any errors.
Despite SO's admonishment not to respond to other answers I'm going to enhance Thomas Geider's answer above by explaining why you need to create a rails_bootstrap_forms.css file in app/assets/stylesheets.
If you look in the rails-bootstrap-forms Github you'll notice they have a rails_bootstrap_forms.css file. The README doesn't tell you this but it follows that this css file needs to be in /app/assets/stylesheets.
Here's the file:
https://github.com/bootstrap-ruby/rails-bootstrap-forms/blob/master/app/assets/stylesheets/rails_bootstrap_forms.css
I have a simple rails project (ruby 1.9.3, rails 3.2.13), and I am attempting to incorporate the Gumby CSS Framework. The framework requires Compass, with modular-scale.
For sake of completeness the majority of the post contains information, skip to the end for the actual problem.
The working directory is being watched with
$ compass watch`
Compass was incorporated into the project with:
compass create --app rails \
-l ./app/assets/stylesheets/gumby/ \
--using modular-scale
The contents of config/compass.rb is:
require 'modular-scale'
project_type = :rails
And the location of Gumby source (SCSS) is app/assets/stylesheets/gumby.
The resulting compiled css appears in public/assets/gumby/gumby.css.
The following is within my Gemfile
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'compass-rails'
gem 'coffee-rails', '~> 3.2.1'
gem 'modular-scale'
gem 'gumby-rails'
gem 'uglifier', '>= 1.0.3'
end
And bundle install completes without errors.
However...
The following error message appears on all served pages:
Sass::SyntaxError in Users#index
Showing PROJECT_ROOT/app/views/layouts/application.html.erb where line #5 raised:
File to import not found or unreadable: compass/typography/vertical_rhythm.
Load path: Sass::Rails::Importer(PROJECT_ROOT/app/assets/stylesheets/gumby/_base.scss)
(in PROJECT_ROOTr/app/assets/stylesheets/gumby/_base.scss)
After hours of tinkering, I am at a loss as to the reason why Sass cannot read the Compass library.
I believe I found the solution from https://stackoverflow.com/a/9021785/1280997.
Removing config/compass.rb and rebooting the server fixes the immediate problem, however I am now faced with:
Undefined mixin 'box-sizing'.
(in PROJECT_ROOT/app/assets/stylesheets/gumby/_base.scss)
Ok, after much digging, I've found a way to incorporate Gumby into Rails, however I've lost the ability to edit the scss in the process. I did this using the gumby-framework gem. Setup was simple, following the README.
I have a Rails app getting the following error:
Less::ParseError in Home#index
Showing /Users/burtondav/sites/requestsys/app/views/layouts/application.html.erb where line #20 raised:
Cannot call method 'charAt' of undefined
(in /Users/burtondav/sites/requestsys/app/assets/stylesheets/bootstrap_and_overrides.css.less)
Extracted source (around line #20):
17: }
18: </style>
19:
20: <%= stylesheet_link_tag "application", :media => "all" %>
Some GEMS I'm using:
gem 'rails', '3.2.11'
gem 'twitter-bootstrap-rails'
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'less-rails'
gem 'commonjs'
gem 'therubyracer', :platforms => :ruby
gem 'uglifier', '>= 1.0.3'
end
It seems to be a problem with LESS that Bootstrap uses.
I've read several other similar issues. So, I upgraded Ruby to 1.9.3p374. But, that didn't fix the problem.
Any ideas?
THANKS!
UPDATE
This is the bootstrap_and_overrides.css.less
#import "twitter/bootstrap/bootstrap";
#import "twitter/bootstrap/responsive";
// Set the correct sprite paths
#iconSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings");
#iconWhiteSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings-white");
I have temporary fixed the issue. There is a syntax change to the mixins.less that seems to only be supported by LESS.js
As an example:
Post-2.3 release:
.offsetX (#index) when (#index > 0) {
.offset#{index} { .offset(#index); }
.offset#{index}:first-child { .offsetFirstChild(#index); }
.offsetX(#index - 1);
}
Pre-2.3 release
.offsetX (#index) when (#index > 0) {
(~'.offset#{index}') { .offset(#index); }
(~'.offset#{index}:first-child') { .offsetFirstChild(#index); }
.offsetX(#index - 1);
}
After adding (~"") back in everywhere it was removed (you will have to view a diff from 2.3 and the release before to see where its been removed, all my assets compile again with no errors and still using LESS.
This change was only in mixins.less btw and only about a total of 5 or 6 lines.
Got the same failure. Fixed it by rolling back twitter-bootstrap-rails to version 2.1.4 (as of this writing the latest is 2.2.4)
# Gemfile
...
group :assets do
...
gem "therubyracer"
gem "less-rails"
end
gem "twitter-bootstrap-rails", '2.1.4'
After following up with you in the comments. It seems the answer lies in opening a github issue with either twitter-bootstrap-rails or less-rails describing your issue. You could also follow on the original issue: https://github.com/seyhunak/twitter-bootstrap-rails/issues/72
Otherwise two solutions are offered to you:
Use the SASS version: https://github.com/jlong/sass-twitter-bootstrap
Use the native css version available on their site: http://twitter.github.com/bootstrap/customize.html
I solved this in sort of a roundabout way, so YMMV. In my case this error was caused by updating twitter-bootstrap-rails from 2.1.6 to 2.2.5, without any edits to any files. So trying to reproduce this in development, I noticed 404s for requests to halfling icons:
ActionController::RoutingError (No route matches [GET] "/assets/twitter/bootstrap/glyphicons-halflings"):
Since I'm using font-awesome, I simply removed all references to those sprites from my CSS:
# bootstrap_and_override.less
//#iconSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings");
//#iconWhiteSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings-white");
// Glyphicons
//#import "twitter/bootstrap/sprites.less";
That in turn led to this error:
variable #fontAwesomeEotPath_iefix is undefined
which is is a common upgrading issue and solved here by adding this line:
#fontAwesomeEotPath_iefix: asset-path("fontawesome-webfont.eot#iefix");
After that, everything is working again.
I create a new rails project,and add
gem 'bootstrap-sass'
to my Gemfile, then I run bundle install and every things going good. then I add:
/*
*= require bootstrap
*/
in my application.css file, and I write a test,but it doesn't.
and I also try add`#import "bootstrap"; in my hello.css.scss file .but it also doesn't work.
Rollen,
You seem to be mostly there. Sass is in Rails 3.1 by default so you won't need to do anything specific for that. After you add the gem to your Gemfile and do a bundle install your issue is in the application.css file. Typically when using Sass I'd just suggest that you remove the manifest code (all the commenting at the top) from the application.css and rename the application.css to application.css.scss (removing Sprockets from the CSS file). Then add:
#import 'bootstrap'
to the very top of it. That should solve it for you. You'll need to manually add each CSS file you'll want to load into the application.css.scss file since sprockets is gone, but that's typically a good idea anyway since load order in CSS is important for the cascade.
If you want to add the JavaScript features to the framework (which you likely will want to) you'll also want to add
//= require bootstrap
Just above the call to //= require_tree . within app/assets/javascripts/application.js.
Probably a little late to the party, but just in case anyone else stumbles across the question...
This was a small gotcha I Solved by adding #import "bootstrap"; to the top of my application.css file, the renamed the file to application.css.scss
Hope this helps.
https://github.com/rails/sass-rails needs to be there in your Gemfile.
gem 'sass-rails', '~> 3.1'
gem 'bootstrap-sass', '~> 2.0.1'
Remove all the comments at the top of the application.css and rename application.css to either application.sass or application.css.scss depending on how you want to do your css'ing
Then add:
#import 'bootstrap'
This should allow you to start using bootstrap, providing you have indeed included the bootstrap-sass gem correctly and ran bundle install afterwards.