I have a application.css.scss with the following content -
#import bootstrap
Now I would like to use the chosen-rails gem, and add the following sprokets directive to my application.css.scss file -
*= require chosen
I installed the sprockets-sass gem, and changed my application.css.scss file to -
#import bootstrap
//*= require chosen
However I dont see the chosen css appear, what am I doing wrong?
Try using only the #import syntax:
#import 'bootstrap'
#import 'chosen'
The 'sass-rails' gem instructs not use the require syntax in SASS files.
Related
I keep trying to
#import "bootstrap-sprockets";
#import "bootstrap";
in app/assets/stylesheets/custom.scss, however, when I try to I get the error:
File to import not found or unreadable: bootstrap-sprockets.
Load paths:
/Users/SimonFekete/environment/course_cat/app/assets/config
When I comment out #import 'bootstrap-sprockets'; it works though.
I appreciate any help and please let me know if you need more info.
Do you have this gem in your gemfile.
gem 'bootstrap-sass', '3.2.0.2'
Also, Have you restarted the server after installing the gem.
If it doesn't work out, remove gem 'bootstrap' and/or gem 'sass-rails', if you have any of them in your gemfile
Try to add this line to your application.js :
//= require bootstrap-sprockets
Remember, always put //= require filename above //= require_tree .
I have a rails engine, and I want to use bootstrap on it.
I included 'bootstrap' as a dependency. And I want to import in my application.scss file.
However, importing like this:
#import 'bootstrap';
Doesn't work as normal. I suspect that it is because I'm running an engine, and my scss file is placed in a module instead of the /stylesheets directory. However,
#import '../bootstrap';
does not work either.
Any ideas, and in addition, is there something fundamental I should know about rails engines when it comes to referencing by directory and what not? I only ask because this is the first time I've ever worked with a rails engine
UPDATE
It appears that also the jquery-rails gem (in addition to boostrap) could not be found when I require it in my application.js file like this:
//= require jquery-rails
//= require bootstrap
I figured it out. I just had to change:
s.add_dependency 'bootstrap'
to this:
s.add_dependency 'bootstrap', '~> 4.1.3'
Rails 5.1
In my Gemflie, I have the following:
gem 'sass-rails', '~> 5.0'
and I want to only use Sass in my application. When I generated the application, I had the following in my application.css file:
/*
*= require_tree .
*= require_self
*/
I copied application.css to application.scss and deleted application.css
Would I need to keep these lines in application.scss, or should I replace them with the following lime in application.scss:
#import "global";
You are correct, you should replace require statement to #import. Below is the sample one,
#import 'bootstrap-sprockets';
#import 'bootstrap';
#import 'bootstrap_include';
#import 'dataTables/bootstrap/3/jquery.dataTables.bootstrap';
#import 'jquery-ui/core';
#import 'jquery-ui/theme';
#import 'datepicker';
So, that you should be able to use the predefined sass variables in you scss files.
Bootstrap is not loading for me. What am I doing wrong?
application.scss (complete file, nothing else in it)
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
#import "bootstrap-sprockets";
#import "bootstrap";
#import "bootstrap/theme";
Gemfile
gem 'bootstrap', '~> 4.0.0.alpha4'
gem 'bootstrap-sass', '~> 3.1.1'
gem 'bootstrap-sass-extras'
HTML IN HEADER SHOWS (running rails s, in development mode):
<link rel="stylesheet" media="all" href="/stylesheets/application.css">
have you try :
rails generate bootstrap:install static
rails generate bootstrap:install less
This is a little hard to track down with the information you provided. Have you renamed your style files to .scss extention? Make sure you follow the installation instructions in the docs: Bootstrap 4 alpha.
It looks like you are using extra gems you don't need. If you are using the alph 4 version of bootstrap, you only need that in your gem file, you do not need version 3. Make sure include the right dependencies in your application.js file:
//= require jquery
//= require bootstrap-sprockets
as well as:
#import "bootstrap";
in your application.scss file.
You have to configure these files and then make sure you restart your application in order for the changes to take place. Hope this helps!
I recently upgraded to rails 3.1 and also installed the Bourbon gem in my rails 3.1 app. Added this to my gemfile: gem 'bourbon' and ran $ bundle install but when in my application.css.scss I add the #import "bourbon"; line, i get the following error:
File to import not found or unreadable: bourbon.
Load path: Sass::Rails::Importer ...
here is my application.css.scss file
/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. 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
*/
#import "bourbon";
#import "scaffold.css.scss";
.hidden{
display:none;
}
any idea how to load Boubon? what am I doing wrong?
I am guessing there need to be some files that need to be generated for rails to access bourbon library, no?
Any help or clues will be much appreciated
alik, try specifying the gem version number in your gemfile. https://rubygems.org/gems/bourbon
gem "bourbon", "~> 0.2.1"
rake bourbon:install will not help you on rails 3.1+