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.
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 .
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 have a LESS-based rails application.
since I added summernote html editor, I had to add also SASS code to my project.
So I added these lines:
Gemfile:
gem 'font-awesome-rails'
gem 'summernote-rails'
gem 'bootstrap-sass'
application.css:
*= require font-awesome
*= require summernote
In local everything works fine.
When I commit the application to heroku I get the following error:
Sass::SyntaxError: Undefined variable: "$alert-padding".
(in /tmp/build_xxx/vendor/bundle/ruby/2.1.0/gems/bootstrap-sass-3.3.1.0/assets/stylesheets/bootstrap/_alerts.scss:10)
I guess I miss the SASS variables, but have no idea how to add them without create any conflict with the LESS code.
============= EDIT =================
The precompilation is broken on the first sass variable it finds, in file /gems/bootstrap-sass-3.3.1.0/assets/stylesheets/bootstrap/_alerts.scss:
.alert {
padding: $alert-padding;
I assume the precompiler does not have any SASS variable declared, and fails to precompile on the first place it finds any.
============= EDIT =================
I added to my application.scss the #import I understand I needed to have, now it looks like this:
#import "bootstrap-sprockets";
#import "bootstrap/variables";
#import "bootstrap/mixins";
#import "bootstrap";
/*
* 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 custom_bootstrap/custom_bootstrap
*= require custom
*= require social-share-button
*= require bootstrap-datetimepicker
*= require dataTables/jquery.dataTables
*= require dataTables/src/demo_table_jui
*= require pricing
*= require jquery.fileupload-ui
*= require font-awesome
*= require social-buttons-3.css
*= require summernote
*/
I definitely have _variables.scss included (I renamed it in order to be sure), and I see that $alert-padding is declared:
$alert-padding: 15px !default;
$alert-border-radius: $border-radius-base !default;
$alert-link-font-weight: bold !default;
Still, I get this error!
PD -
I use the following command in order to check precompilation locally:
RAILS_ENV=development bundle exec rake assets:precompile
You can find installation instructions here.
I fail to see at least those:
application.css should be application.scss
gem 'sass-rails' in your Gemfile
use the import statements accordingly and appropriately in your application.scss
How do I include footable in Ruby on Rails 4?
In my Gemfile I added gem 'foo_table-rails'
I did a bundle install after that.
In my application.js I wrote: //= require footable.core
In application.scss I wrote: //= require footable.core
I have tried even *= require footable-rails , but unfortunately it is not working.
My application.scss is as shown below:
#import "bootstrap-sprockets";
#import "bootstrap";
*= require footable.metro
PS: I have already installed bootstrap & I have been using its templates.
Your application.js is correct, but in your application.scss, you need to choose a theme, if you're starting with the metro theme for example use:
*= require footable.metro
Try changing your application.scss to:
/*
*= require footable.metro
*= require_self
*/
#import "bootstrap-sprockets";
#import "bootstrap";
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.