Using Rails 3.2 trying twitter bootstrap and using formtastic-bootstrap with these gems as I found recommended
gem 'formtastic', git: 'git://github.com/justinfrench/formtastic.git', branch: '2.1-stable'
gem 'formtastic-bootstrap', git: 'git://github.com/cgunther/formtastic-bootstrap.git', branch: 'bootstrap2-rails3-2-formtastic-2-1'
If I require them in the manifest in application.css then they work and forms get the twitter styles however I want to override some of the colours so I know I need to use #import so I can override the $ vars.So I have put this in application.css after the manifest
#import 'twitter/bootstrap';
#import 'formtastic-bootstrap.css';
I can see these files have been got by the browser but the styles are not being applied
What am I getting wrong?
Sorry! as I was upgrading a rails 3.1 app I did not see that application.css was application.css not application.css.scss! My bad! Now that sass sees the #import as its own instruction and not a css #import it works as expected.
Related
In a project I'm using Bootstrap 5, importing modules from node_modules with a big list of #import (ex. #import "../node_modules/boostrap/scss/functions" etc...).
I'm worried about the deprecation of #import coming soon.
Simply replacing the #import with #use will break the sass build (my compiler doesn't seem to be the culprit as simple cases with #use do work).
It seems to be a problem with the new scoping of #use and npm bootstrap 5.
What should I do?
I'm using bootstrap icons on Ruby on Rails with bootstrap-sass.
<span class="glyphicon glyphicon-ok"></span>
It works fine locally. However, my production server use apache virtual host to redirect the url, which means my url changed from localhost:3000 to www.foo.com/bar/.
Everything else works fine (stylesheet, images), except when I use bootstrap icons, the browser tried to download fronts (.eot, .woff, .ttf) from
www.foo.com/assets
instead of
www.foo.com/bar/assets
Is there anyway to fix this?
Below are the gem I use
gem 'rails', '4.2.5.1'
gem 'sass-rails'
gem 'sprockets-rails'
gem 'bootstrap-sass'
my application.css
*= require_self
*= require_tree .
and scaffolds.scss
#import "bootstrap-sprockets";
#import "bootstrap";
#import "bootstrap/theme";
application.css needs to be application.css
and the the
#import "bootstrap-sprockets";
#import "bootstrap";
I have the following entries my (Rails 3.2.13) Gemfile:
gem 'twitter-bootstrap-rails'
gem 'bootstrap-sass'
and in app/assets/javascripts/application.js:
//= require twitter/bootstrap
and at the top of app/assets/stylesheets/custom.css.scss:
#import 'bootstrap'
Is this "correct"? Do I need both 'twitter-bootstrap-rails' and 'bootstrap-sass' (or maybe 'bootstrap-sass-rails'), or are they redundant and possibly conflicting? Do the 'bootstrap-sass' gems include the javascript for the framework, or only the CSS?
No you do not need both.
Just simply put this in your gemfile:
gem 'sass-rails'
gem 'bootstrap-sass'
This in application.css.scss:
#import 'bootstrap';
#import 'bootstrap-responsive';
This in application.js
//= require bootstrap
If you're still having problems you may need to look at the ordering of things in your manifest files..
If you want to use SASS you should use boostrap-sass or bootstrap-sass-rails. Twitter-bootstrap-rails uses LESS source. If you were to include both there would probably be conflicts. All of them include javascript for bootstrap already and integrate into the asset pipeline.
I personally use LESS version as it is what bootstrap is originally written in. (might get faster releases when bootstrap updates)
It's generally good to check the gems out on github to evaluate your exact needs and which version of Rails they support.
Rails 3.1 introduces a new way of organizing both JS and CSS with the introduction of manifest files. For example, application.js might look like this:
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require_tree .
This will grab various bits of Jquery, all of your own JS, concatenate them together and serve it as a single file to clients. Simple enough.
Unfortunately the picture is not so clear to me with SASS. SASS already has concatenation built in using #import.
Should I change all of my partials into full SASS files and then concatenate them using the manifest file or continue using #import? Why?
Sprockets converts all imports to CSS before concatenating, so it can't be used to share mixins and variables across files. I'm guessing this is going to stay that way just because you can import SASS, LESS and CSS files via that method.
So here's how I do it:
If I have ERB to include (mostly for asset_path() calls), I put them in my main file, application.css.scss.erb
If I have vendored CSS I want to include, I require it via Sprockets, e.g. //=require jquerymobile
In that same file, I use the SASS #import command to explicitly load all files. None of the #import'ed files may be .erb though.
load the basic stuff (e.g. reset) and imports with mixins
declare variables
import the specific styles
Here's how my app.css looks at the moment. Don't forget the ";" and the quotes:
// Using SASS import is required for variables and mixins to carry over between files.
#import "reset.css.scss";
#import "mixins.css.scss";
$color_base: #9b2d31;
$color_background: #c64e21;
// Using asset_path is important for browsers to use versioned url for the asset.
// This lets us do aggressive caching.
$logo-url: url(<%= asset_path("logo.png") %>);
#import "application/layout.css.scss";
#import "application/sidebar.css.scss";
#import "application/videos.css.scss";
#import "application/pages.css.scss";
...
Note that I'm still exploring the Rails 3.1 asset pipeline, so your mileage may vary. I'll try to come back & update if I find anything else interesting.
The best way to solve this is to use the native #import directive as explained here: https://github.com/rails/sass-rails#important-note
This question was already answered here : how to use sprockets imports with sass
Hope this helps! :)
The sass-rails gem explicitly states not use the require syntax with SASS files - use SASS's #import statements instead.
I am trying to get SASS to work with Rails 3.
I have added gem 'haml' to my Gemfile (and ran bundle install) and I have added a styles.scss to my public/ directory, but it does not seem to be working. Can someone help me out? Thanks!
By default, Sass expects sass/scss files to go in public/stylesheets/sass, which are then compiled into css files in public. You can change this path by setting Sass::Plugin.options[:template_location] in your config, though.