I am relatively new to programming, therefore I hope that the question is not absolutely stupid.
I got a problem concerning my rails app.
I try to use bootstrap. I built a file called "custom.css.scss" and used the "#import "bootstrap"" line in it.
The problem is: Each time I save my "custom.css.scss" file a new file "custom.css" is automatically generated and I get the following message: "custom.css.scss File to import not found or unreadable:bootstrap".
The funny thing is: When I delete the file "custom.css.scss" and refresh my browser, everything is fine (which means: bootstrap is used).
Do you have any idea, what could be the reason?
Kindest regards
Chris
P.S.: This is my installed gem file
source 'https://rubygems.org'
gem 'rails', '3.2.11'
gem 'bootstrap-sass', '2.1'
gem 'bcrypt-ruby', '3.0.1'
gem 'faker', '1.0.1'
gem 'will_paginate', '3.0.3'
gem 'bootstrap-will_paginate', '0.0.6'
gem 'jquery-rails', '2.0.2'
group :development, :test do
gem 'sqlite3', '1.3.5'
gem 'rspec-rails', '2.11.0'
# gem 'guard-rspec', '1.2.1'
# gem 'guard-spork', '1.2.0'
# gem 'spork', '0.9.2'
end
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'sass-rails', '3.2.5'
gem 'coffee-rails', '3.2.2'
gem 'uglifier', '1.2.3'
end
group :test do
gem 'capybara', '1.1.2'
gem 'factory_girl_rails', '4.1.0'
gem 'cucumber-rails', '1.2.1', :require => false
gem 'database_cleaner', '0.7.0'
gem 'launchy', '2.1.0'
# gem 'rb-fsevent', '0.9.1', :require => false
# gem 'growl', '1.0.3'
end
group :production do
gem 'pg', '0.12.2'
end
The custom.css.scss file look like this
#import "bootstrap";
/* universal */
html {
overflow-y:scroll
}
body {
padding-top: 60px
}
section {
overflow: auto;
}
textarea {
resize: vertial;
}
.center {
text-align: center;
}
.center h1 {
margin-bottom: 10px;
}
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.7em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: #999;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
I had a similar problem and saw Habax's solution and tried the last step first.
I just restarted the server.
That turned out to be enough. Hope that helps.
I had a similar issue, and I changed the file type from css to scss. I bet if you erase '.css' from your file name it'll work.
I had a similar issue when working on a Rails 6 application with Bootstrap 4.
The issue was that I did not specify the node modules full path of the bootstrap.scss file in my app/assets/stylesheets/application.scss file.
After installing Bootstrap 4 and its dependencies using this command:
yarn add bootstrap jquery popper.js
All I needed to do was to modify it from:
#import "bootstrap";
to
#import 'bootstrap/scss/bootstrap';
You can then add require the boostrap.js file in the app/javascript/packs/application.js file this way:
require("bootstrap");
That's all.
I hope this helps
Had the same issue in a new application, but restarting the development server solved the issue.
facing same problem. I rename custom.css.scss to custom.css
and I specified version of ruby in Gemfile. and bundle install .
in my case:
ruby '2.0.0'
I had this same problem, solved by fixing bootstrap-sass and sass-rails versions to:
gem 'sass-rails', '~> 3.2'
gem 'bootstrap-sass', '~> 2.3.1.0'
And then bundle install and server restart.
I just want to past my resolution as a reference. I have also encountered this issue today.
if you also using emacs with scss mode it may be helpful. as default when you save scss file emacs will auto-compile these scss file and create a responding .css file. then you just need to delete these .css file. or put below code to .emacs as permanent fix
(setq scss-compile-at-save nil) ;; disable the auto-compilation
I got the same problem of "File to import not found or unreadable: bootstrap" in my scss file. I just solved by adding require statement of "bootstrap-sass" to config.ru file. My config.ru is like the following.
# This file is used by Rack-based servers to start the application.
require ::File.expand_path('../config/environment', __FILE__)
require 'bootstrap-sass' #require statement of bootstrap-sass
run Rails.application
Running npm install resolved the issue for me.
Related
Just upgraded to bootstrap 4.
In the old version I was using #import bootstrap on my app/assets/stylesheets/custom.scss file and thus customizations worked fine.
Now, following the getbootstrap.com Get Started guide, I have included #import bootstrap in my application.scss and customizations have stopped working.
Here's my gemfile;
gem 'rails', '5.1.4'
gem 'bcrypt', '~> 3.1.7'
gem 'faker', '1.7.3'
gem 'will_paginate', '3.1.6'
gem 'bootstrap-will_paginate', '1.0.0'
gem 'puma', '3.9.1'
gem 'uglifier', '3.2.0'
gem 'coffee-rails', '4.2.2'
gem 'jquery-rails', '4.3.1'
gem 'turbolinks', '5.0.1'
gem 'jbuilder', '2.7.0'
gem 'coffee-script-source', '1.8.0'
gem 'letsencrypt_plugin', '~> 0.0.10'
gem 'etsy', '~> 0.3.2'
gem 'bootstrap', '~> 4.0'
gem 'sprockets-rails', '~> 3.2', '>= 3.2.1'
gem 'popper_js', '~> 1.12', '>= 1.12.9'
My application.scss file:
/*
* 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"
Here's what I'm trying to get to work in custom.scss:
body {
padding-top: 60px;
background-color: $light-gray!important;
}
Thanks in advance :)
Аfter #import, a semicolon is missing. Make sure that the variable $light-gray is also defined. I think #import with bootstrap 4 version works pretty the same as for bootstrap 3.
I am using
#include keyframes(small) {
0% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.small {
#include animation(small 1s infinite);
}
And rails gives me the following error:
Sass::SyntaxError at /
Undefined mixin 'keyframes'. (or 'animation')
I am using latest SASS and compass --pre (alpha) which is supposed to support animations.
Try using the following combination of gems in your GemFile:
gem "sass", "~> 3.2.19"
gem 'sass-rails', '~> 4.0.4'
gem "compass", "~> 0.12.7"
gem 'compass-rails', '~> 2.0.0'
And then make sure you have the following lines at the top of your scss file:
#import "compass";
#import "compass/css3";
The following gemfile updates should do it...
# compass 1.0 needed to use keyframe mixin
# but compass 1.0 needs Sass 3.3 (further below)
gem "compass", "~> 1.0"
gem 'compass-rails'
# use sass-rails ~>5.0 to get Sass ~>3.3
# needed for compass ~>1.0
# which is needed for keyframes mixin
gem 'sass-rails', "~>5.0"
I downloaded the SpaceLab theme from sass-bootswatch.theblacksmithhq.com and in part of the file it has
// FORMS
// -----------------------------------------------------
.control-group.warning {
#include formFieldState(#E29235, #E29235, $warningBackground);
}
.control-group.error {
#include formFieldState(#C00, #C00, $errorBackground);
}
.control-group.success {
#include formFieldState(#2BA949, #2BA949, $successBackground);
}
// DROPDOWNS
// -----------------------------------------------------
When I run rake assets:precompile or just put up a rails server I get this error Undefined mixin 'formFieldState'.
This began after I added active admin. My application.css file looks like this by the way.
*= require_self
*= require variables
*= require base
*= require devise
*= require nav
*/
I can remove the section from the variables file and it will run but my styles look really bad almost like bootstrap is not running.
My Gemfile looks like this:
gem 'rails', '3.2.13'
gem 'devise'
gem 'omniauth-google-oauth2'
gem 'decent_exposure'
gem 'turbolinks'
gem 'simple_form'
gem 'activeadmin'
gem "meta_search", '>= 1.1.0.pre'
gem 'jquery-rails'
#TODO needed for the server
gem 'mysql'
group :production do
# needed for heroku
#gem 'pg'
end
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'coffee-rails', '~> 3.2.1'
gem 'uglifier', '>= 1.0.3'
gem 'sass-rails'
gem 'bootstrap-sass'
#TODO needed for the server
#gem 'execjs'
#gem 'therubyracer'
end
group :development, :test do
gem 'certified'
gem 'better_errors'
gem 'factory_girl_rails'
gem 'pry-rails'
gem 'pry-stack_explorer'
gem 'pry-debugger'
gem 'awesome_print'
gem 'quiet_assets'
gem 'rspec-rails'
gem 'heroku'
end
group :test do
gem 'sqlite3'
end
If there is anything else that would help you understand please let me know.
I have two explanations - I think both of them apply to you:
You have not specified a version for the 'bootstrap-sass' gem in your Gemfile. Your SpaceLab theme seems to be based on Bootstrap 2 while the current version of the 'bootstrap-sass' gem is 3.0.2.1, which ships Bootstrap 3.0.2, which is not compatible with SpaceLab (and the mixin doesn't exist anymore). Maybe you "accidentally" upgraded bootstrap-sass when installing Active Admin.
Another problem is accessing SASS variables and mixins when using the Asset Pipeline (Sprockets), as described here. If you use //=require for importing stylesheets (e.g. for importing Bootstrap and your theme from separate files in your application.css) you cannot access SASS variables and mixins between files because Sprockets compiles each file separately. The only option you have is to import Bootstrap and your theme via the Sass #import one after another in one SASS file to make sure they're able to access each others' variables and mixins, like (just exemplarily):
#import "spacelab-variables";
#import "bootstrap";
#import "spacelab-theme";
I am using Font Awesome in a rails 3.2.13 app. I have successfull added the following icons to the app: icon-search icon-shopping-cart and others. But for some reason when I try to use icon-thumbs-up and icon-thumbs-down they look like icon-thumbs-up-alt or icon-thumbs-up-alt. If I try and use icon-thumbs-up-alt, no icon shows on the page.
I access both bootstrap and font awesome via gems:
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'therubyracer'
gem 'font-awesome-rails'
gem 'jquery-ui-rails'
gem 'less-rails'
gem 'twitter-bootstrap-rails'
gem 'uglifier', '>= 1.0.3'
end
Here is the application.css.scss file:
*= require bootstrap_and_overrides
*= require_self
*= require_tree .
#import "font-awesome";
.icon-thumbs-up {
color: green;
}
.icon-thumbs-down {
color: red;
}
Here is the bootstrap_and_overrides.css.less
#import "twitter/bootstrap/bootstrap";
body { padding-top: 50px; }
#import "twitter/bootstrap/responsive";
// Set the correct sprite paths
#iconSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings");
#iconWhiteSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings-white");
// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
// Note: If you use asset_path() here, your compiled boostrap_and_overrides.css will not
// have the proper paths. So for now we use the absolute path.
#fontAwesomeEotPath: asset-path("fontawesome-webfont.eot");
#fontAwesomeWoffPath: asset-path("fontawesome-webfont.woff");
#fontAwesomeTtfPath: asset-path("fontawesome-webfont.ttf");
#fontAwesomeSvgPath: asset-path("fontawesome-webfont.svg");
// Font Awesome
#import "fontawesome";
Here is the button using the icons:
<%= link_to (content_tag(:i, "", :class=>"icon-thumbs-up")) + (content_tag(:i, "", :class=>"icon-thumbs-down")) + " Review", root_path , :class => "btn" %>
Could the issue be a conflict because I added both the twitter-bootstrap-rails and font-awesome-rails gems?
Thanks
Steve
It seems like the twitter-bootstrap-rails gem isn't importing the most recent version of font awesome, version 3.2.1 so I had to keep the font-awesome-rails gem. But I did update the gem to the most recent version, 3.2.1.1
The gemfile now looks like:
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'therubyracer'
gem 'jquery-ui-rails'
gem 'less-rails'
gem "twitter-bootstrap-rails"
gem "font-awesome-rails"
gem 'uglifier', '>= 1.0.3'
end
The application.css.scss:
*= require bootstrap_and_overrides
*= require_self
*= require_tree .
*/
#import "font-awesome";
To avoid the chance of conflict between the twitter-bootstrap-rails and font-awesome gems I disabled the defaults that come with twitter-bootstrap-rails:
// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
// Note: If you use asset_path() here, your compiled boostrap_and_overrides.css will not
// have the proper paths. So for now we use the absolute path.
//#fontAwesomeEotPath: asset-path("fontawesome-webfont.eot");
//#fontAwesomeWoffPath: asset-path("fontawesome-webfont.woff");
//#fontAwesomeTtfPath: asset-path("fontawesome-webfont.ttf");
//#fontAwesomeSvgPath: asset-path("fontawesome-webfont.svg");
// Font Awesome
//#import "fontawesome";
I think you problem is because you're mixin gems!
The gem "twitter-bootstrap-rails" already include font-awesome you dont need to include any extra gem's for getting the icons. First of all you need to remove the gem "font-awesome-rails",
Your files should look like this:
Gemfile
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'therubyracer'
gem 'jquery-ui-rails'
gem 'less-rails'
gem 'twitter-bootstrap-rails'
gem 'uglifier', '>= 1.0.3'
end
application.css.scss
*= require bootstrap_and_overrides
*= require_self
*= require_tree .
.color-green {
color: green;
}
.color-red {
color: red;
}
bootstrap_and_overrides.css.less
#import "twitter/bootstrap/bootstrap";
body { padding-top: 50px; }
#import "twitter/bootstrap/responsive";
// Set the correct sprite paths
#iconSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings");
#iconWhiteSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings-white");
// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
// Note: If you use asset_path() here, your compiled boostrap_and_overrides.css will not
// have the proper paths. So for now we use the absolute path.
#fontAwesomeEotPath: asset-path("fontawesome-webfont.eot");
#fontAwesomeWoffPath: asset-path("fontawesome-webfont.woff");
#fontAwesomeTtfPath: asset-path("fontawesome-webfont.ttf");
#fontAwesomeSvgPath: asset-path("fontawesome-webfont.svg");
// Font Awesome
#import "fontawesome";
Your.html
<i class='icon-thumbs-up color-green'></i>
Note: Your should check what version of "twitter-bootstrap-rails" do you have, because the thumb up icon its on the last update of the gem (It was 4 days ago when they add support for font-awesome 3.2.1). Make sure to update your gem. Hope it helps!
i am trying to get the zurb foundation icon fonts to work within my rails project, though they dont appear to be working correctly
general_foundicons.css.sass
/* font-face
#font-face
font-family: "GeneralFoundicons"
src: font-url("general_foundicons.eot")
src: font-url("general_foundicons.eot?#iefix") format("embedded-opentype"), font-url("general_foundicons.woff") format("woff"), font-url("general_foundicons.ttf") format("truetype"), font-url("general_foundicons.svg#GeneralFoundicons") format("svg")
font-weight: normal
font-style: normal
i have these files in app/assets/fonts though the fonts dont appear to be getting loaded
I use the foundation-icons-sass-rails gem. Extracting from their README:
Add foundation-icons-sass-rails gem to the assets group in your Gemfile:
group :assets do
gem 'sass-rails', " ~> x.x.x"
gem 'coffee-rails', "~> x.x.x"
gem 'uglifier'
gem 'foundation-icons-sass-rails'
end
Then rename your app/assets/stylesheets/application.css to app/assets/stylesheets/application.css.scss and add:
#import 'foundation-icons';
Now, you can use it as follows:
<i class="fi-[icon]"></i>
Edit
In Rails 4 you don't need an assets group. Additionally, make sure to install the latest version of the gem (3.0.0 as of 2014):
gem 'sass-rails', " ~> x.x.x"
gem 'coffee-rails', "~> x.x.x"
gem 'uglifier'
gem 'foundation-icons-sass-rails' ~> 3.0.0
Have you added your new fonts folder to the asset pipeline in config/application.rb? After that, I would try putting the block after #font-face in curly brackets and adding semicolons to the end of the other lines. If that doesn't do it, rewrite the src lines to src: url(font-path("general_foundicons.eot")) and so on, all as recommended at this helpful link.