After updating rails from 3.2.3 to 3.2.14, and updating twitter-bootstrap-rails from 2.2.0 - 2.2.6 I'm getting this Less unrecognised input error:
Less::Error - Unrecognised input
(in /Users/andrew/rails/teebox_network/app/assets/stylesheets/bootstrap_and_overrides.css.less):
(gem) less-2.4.0/lib/less/parser.rb:74:in `block (2 levels) in parse'
at finish (/Users/andrew/.rvm/gems/ruby-1.9.3-p448/gems/less-2.4.0/lib/less/js/lib/less/parser.js:475:in `'
at tree.importVisitor.run (/Users/andrew/.rvm/gems/ruby-1.9.3-p448/gems/less-2.4.0/lib/less/js/lib/less/import-visitor.js:25:in `'
at Parser.parser.parse (/Users/andrew/.rvm/gems/ruby-1.9.3-p448/gems/less-2.4.0/lib/less/js/lib/less/parser.js:484:in `'
The offending lines appear to be first 2 in 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");
#fontAwesomeEotPath: asset-path("fontawesome-webfont.eot");
#fontAwesomeEotPath_iefix: asset-path("fontawesome-webfont.eot#iefix");
#fontAwesomeWoffPath: asset-path("fontawesome-webfont.woff");
#fontAwesomeTtfPath: asset-path("fontawesome-webfont.ttf");
#fontAwesomeSvgPath: asset-path("fontawesome-webfont.svg");
// Font Awesome
#import "fontawesome";
// Glyphicons
#import "twitter/bootstrap/sprites.less";
Googling suggested to downgrade to 2.2.0, however the error remains. I am running less-rails (2.4.2), sass-rails (3.2.6), therubyracer (0.12.0). If anyone needs any other gem versions just shout.
Do I have to update a critical gem to fix this issue?
The issue is with less-rails and not with bootstrap. It seems the less syntax has changed. A lot of people seem to have this problem right now: https://github.com/metaskills/less-rails/issues/71 has details.
The suggestion there, which works for me, was to make sure you use the older version of less-rails for now.
gem 'less-rails', '2.3.3'
in my Gemfile solved the issue for me.
I never got to the bottom of this issues, but as I didn't require access to the bootstrap mixins I reinstalled twitter-bootstrap-rails but ran the static stylesheets generator, so I wasn't using Less anymore.
rails generate bootstrap:install static
Related
I am trying to create custom bootstrap by importing only the required components into a style.scss file from bootstrap sass. However, I get a chain of many Deprecation Warnings when I import and compile the 3 required components.
SCSS:
#import "./bootstrap-4.3.1/scss/functions";
#import "./bootstrap-4.3.1/scss/variables";
#import "./bootstrap-4.3.1/scss/mixins";
Console Warning (first of the many):
Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
298 │ $headings-margin-bottom: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
bootstrap-4.3.1\scss\_variables.scss 298:31 #import
style.scss 3:9 root stylesheet
I am using the following versions of tools:
Bootstrap: 4.3.1, Sass: 1.33.0 compiled with dart2js 2.13.0
Is anything wrong with using this version combination, or any other issue? How can I resolve it?
I found a solution here.
Essentially, what I understand is that a new version of SASS is throwing warnings. You can downgrade your version to stop the warnings for now and doing so shouldn't break anything either.
tl:dr You should use Sass: "1.32.13" instead.
If You wanna hide the warrning this issue
You can review sass options from Sass-lang
and add the best option for your sass
In my case, I have this issue
Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
So I added "quietDeps" option to my sass
.pipe(sass({
outputStyle: 'compressed',
quietDeps: true
}).on('error', sass.logError))
and worked correctly after run my tasks again
You can use the sass-migrator for fix division problems, it able to replace all place the / with math.div and also include the #use "sass:math";
https://sass-lang.com/documentation/cli/migrator
I am following a tutorial to set up my bootstrap 4 environment by using node package management and sass. I installed bootstrap using npm install bootstrap command and then import the source code to a main.scss file using the #import "node_modules/bootstrap/scss/bootstrap". I then installed Ruby and SASS with gem install sass, so it enables me to run sass main.scss main.css to convert boostrap file to a css file that can be link to the html file.
However, the boostrap code only works in IE but no Google Chrome. I inspected the code in google chrome and it seems it is reading the code all right, but don't know why bootstrap is not working in this case as you can see the form is not styled at all. so confused now.
I searched for what cause the problem and found out that there is someone's answer that might be relevant to my problem:
IE and Edge are not fussy : stylesheets are rendered regardless of
the encodings. But Chrome is totally intolerant of unmatched
encodings.
How can I change the unicode for my css file when it is generated by sass in the background? In addition, how to change the code to meet the same standard as my html file? is this unicode related issue??
I guess there is no point to show the code since main.css was created by sass for Bootstrap 4. I am not sure if someone has experienced a similar situation and know what I am talking about?
Try installing node-sass (https://www.npmjs.com/package/node-sass), and also install "npm install bootstrap" and import it as 'bootstrap/dist/css/bootstrap.min.css' which will import bootstrap4 (latest)
I am using bootstrap-sass and twitter-bootstrap-rails in my rails app. All the buttons turned 2D/flat and the labels text went bold after I precompiled my assets! I am trying to figure out what went wrong here?
rake assets:precompile
Gemfile:
gem 'bootstrap-sass'
gem 'twitter-bootstrap-rails'
gem 'therubyracer'
gem 'less-rails'
bootstrap_and_overrides.css.less
#import "twitter/bootstrap/bootstrap";
#import "twitter/bootstrap/responsive";
// Set the correct sprite paths
#iconSpritePath: image-url("twitter/bootstrap/glyphicons-halflings.png");
#iconWhiteSpritePath: image-url("twitter/bootstrap/glyphicons-halflings-white.png");
// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
#fontAwesomeEotPath: asset-url("fontawesome-webfont.eot");
#fontAwesomeEotPath_iefix: asset-url("fontawesome-webfont.eot?#iefix");
#fontAwesomeWoffPath: asset-url("fontawesome-webfont.woff");
#fontAwesomeTtfPath: asset-url("fontawesome-webfont.ttf");
#fontAwesomeSvgPath: asset-url("fontawesome-webfont.svg#fontawesomeregular");
// Font Awesome
#import "fontawesome/font-awesome";
I kinda figured out what's going on here... thanks to BootstrapThemer.
The issue is that I have upgraded to bootstrap 3.x where the defaults are flat buttons. I never noticed any difference in my dev environment until I precompile my assets as I already had precompiled versions of 2.x
However, If someone still prefers 3D style buttons, please check out this theme
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
I am using bootstrap-sass and font-awesome-sass-rails gems and have successfully eradicated duplicate icons (from glyphicons) by adding to bootstrap-and-overrides.css.scss:
[class^="icon-"] {
background-image:none;
}
However, now I am having the problem of slightly out of line icons.. The glyphicons were perfect before. Now I am seeing:
I would like to move the icons down a pixel or 2. Please help. Thanks.
Similar to the directions for LESS found on the Font-Awesome Integration section, one should remove the SASS for the glyph icons altogether, rather than just load the Font-Awesome SASS on top of it. I strongly discourage any approach that merely tries to save appearances by overriding CSS rules that don't need to be there in the first place.
I don't use Rails, but I assume the rough outline would be:
Checkout a copy of the bootstrap-sass repo.
Locate the _bootstrap.scss file.
Replace the #import "bootstrap/sprites"; with #import "your/path/to/font-awesome";, where your/path/to/ contains the font-awesome.scss.
Recompile the bootstrap.scss (don't forget to minify!).
Im using the twitter-bootstrap-rails gem. I had to comment out:
#iconSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings.png");
from bootstrap_and_overrides.css.less file