I am using gem 'bootstrap-sass' on heroku along with gem 'sass-rails', '~> 4.0.0'
On my local server I can see my css changes but when I load to heroku, my custom css gets overwritten.
For instance in my local server, I can clearly see the css file in chrome developer tool as
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
but on css this gets over written. I mean I can see the chrome developer tools that in heroku
the above line gets strike down and another font gets shown
font-family: verdana, arial, helvetica, sans-serif;
I have not added this font. Further the "body-background color" css color gets strike out and default white background is shown as body background color.
Can any one give any pointers.
This is how my production.rb looks like
Rails.application.configure do
config.cache_classes = true
config.eager_load = true
config.consider_all_requests_local = false
config.action_controller.perform_caching = true
config.serve_static_assets = false
config.assets.js_compressor = :uglifier
config.assets.compile = false
config.assets.digest = true
config.assets.version = '1.0'
config.log_level = :info
config.i18n.fallbacks = true
config.active_support.deprecation = :notify
config.log_formatter = ::Logger::Formatter.new
config.active_record.dump_schema_after_migration = false
config.action_mailer.default_url_options = { host: 'http://MY_CUSTOM_NAME.herokuapp.com' }
end
I did not remove scaffolding css file from stylesheets directory. That messed up css on heroku. I deleted the file and uploaded to Heroku and css worked.
Related
I am getting NameError - uninitialized constant Sass::Engine: when I run my sinatra app with sass gem.
installed ruby version 2.3.1 with rbenv and also installed sinatra, sass gem.
require 'sinatra'
require 'slim'
require 'sass' # required sass
require 'sinatra/reloader' if development?
get '/styles.css' do
scss :styles #does not generate styles.css, styles.scss file is in /views folder
end
get '/' do
slim :home
end
get '/about' do
#title = "All About This Website"
slim :about
end
get '/contact' do
slim :contact #, :layout => :special
end
not_found do
slim :not_found
end
get '/fake_error' do
status 500
"There's nothing wrong, really :P"
end
Full error:
NameError - uninitialized constant Sass::Engine:
/home/tasqyn/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/tilt-2.0.5/lib/tilt/sass.rb:13:in
prepare'
/home/tasqyn/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/tilt-2.0.5/lib/tilt/template.rb:92:in
initialize'
/home/tasqyn/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/sinatra-1.4.7/lib/sinatra/base.rb:862:in
new'
/home/tasqyn/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/sinatra-1.4.7/lib/sinatra/base.rb:862:in
block in compile_template'
/home/tasqyn/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/tilt-2.0.5/lib/tilt.rb:104:in
block in fetch'
/home/tasqyn/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/tilt-2.0.5/lib/tilt.rb:103:in
fetch'
/home/tasqyn/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/tilt-2.0.5/lib/tilt.rb:103:in
fetch'
/home/tasqyn/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/sinatra-1.4.7/lib/sinatra/base.rb:841:in
compile_template'
/home/tasqyn/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/sinatra-1.4.7/lib/sinatra/base.rb:822:in
render'
/home/tasqyn/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/sinatra-1.4.7/lib/sinatra/base.rb:687:in
scss' main.rb:7:in `block in '
What I am doing wrong?
and here is styles.scss:
$red: #903;
$black: #444;
$white: #fff;
$main-font: Helvetica, Arial, sans-serif;
body {
font-family: $main-font;
}
h1 {
color: $red;
font: 32px/1 $main-font;
}
header h1 {
font-size: 40px;
line-height: 80px;
background: transparent url(/images/logo.png) 0 0 no-repeat;
padding-left: 84px;
}
#mixin tabs ($background: blue, $color: yellow) {
ul {
list-style: none;
margin: 0;
padding: 0;
background: $background;
overflow: hidden;
}
li {
float: left;
}
a {
text-decoration: none;
display: block;
padding: 8px;
background: $background;
color: $color;
&:hover {
background: darken($background, 20%);
}
}
}
nav {
##include tabs($background: $black, $color: $white);
font-weight: bold;
}
p {
font: 13px/1.4 $main-font;
}
Perform below steps :
Add any of this gem into your gem file gem 'bootstrap-sass' or gem 'sass-rails'
Then install bundle using bundle OR bundle install command
Make sure you have in your gemfile:
gem 'sass'
gem 'sass-rails'
If not, add it. Don't forget to run bundle install.
If you are using the asset-pipeline with sinatra, then this might help. For those using rails this could help.
In my scenario, (running rails 3.2.22.2) on one machine my app worked.
On another machine I cloned the repo and ran into the uninitialized constant Sass::Engine error.
Moving gem sass-rails did not work for me
I moved gem 'sass-rails' out of the group :assets do block.
This did not work for me.
Solution for me:
rake assets:clean removes all compiled assets.
Next time you run rake rails s, your assets will be recompiled.
If not, you can run rake assets:precompile to compile all your assets.
Or if you are deploying via capistrano, the deploy.rb will run "deploy:assets:precompile" and compile assets for your production/staging machine.
The error seems to occur because sass is not being compiled in the asset pipeline correctly. (Would love to know why this occurs if anyone has the answer)
I've just started working on a simple Sinatra app and when uploading it to Heroku. None of the files in the public folder seem to be available but it works fine locally.
Are there any obvious reasons this might be happening?
Right now the code is really simple:
require 'rubygems'
require 'sinatra'
require 'bundler/setup'
require 'haml'
require 'rdiscount'
set :static, true
set :public_folder, "#{File.dirname(__FILE__)}/public"
get '/' do
haml :landing
end
__END__
## layout
%html
%head
%meta{charset: "utf-8"}/
%meta{content: "width=device-width, initial-scale=1.0", name: "viewport"}/
%meta{content: "", name: "description"}/
%meta{content: "", name: "author"}/
%title TIL
%link{href: "http://yui.yahooapis.com/pure/0.3.0/pure-min.css", rel: "stylesheet"}
%link{rel: "stylesheet", href: "/styles.css"}
%body
= yield
##landing
%section.hero
.container
.pure-g-r
.pure-u-1
.logo
...
.container
%hr/
.pure-g-r
.pure-u-2-3
.padding-box
:markdown
...
.pure-u-1-3
.padding-box
..
%hr/
.pure-g-r
.pure-u-1
.padding-box
:markdown
...
%hr/
.pure-g-r
.pure-u-1
.padding-box
%h2 ...
.pure-u-1-3
.padding-box
%img.img-rounded{src: "GD-thumbnail.png"}/
:markdown
...
.pure-u-1-3
.padding-box
%img.img-rounded{src: "AL-thumbnail.png"}/
:markdown
...
.pure-u-1-3
.padding-box
%img.img-rounded{src: "BP-thumbnail.png"}/
:markdown
...
%hr/
%footer
.row
.col-lg-12
%p
Local file structure is:
TIL (folder)
- app.rb
- Gemfile
- Procfile
- public (folder)
- AL-thumbnail.png
- BP-thumbnail.png
- GD-thumbnail.png
- logo.png
- styles.css
Have a look in your Heroku log file:
heroku logs
If you can see something like
Rack::Flash::SessionUnavailable - Rack::Flash depends on session middleware.:
Then add
gem "rack-flash-session"
to you Gemfile.
Also add 'require 'rack/flash/test'' to you main file.
This will force heroku to load the desired middelware.
Am writing down a template with use of compass sass here the font-mixin makes some problem by without setting web font.And my config file is like
http_path = "/"
css_dir = "resources/stylesheets"
sass_dir = "resources/stylesheets"
images_dir = "resources/images"
javascripts_dir = "resources/js"
and then by usage of font mixin generated output is
#font-face {
font-family: "cabinregular";
src: url('resources/stylesheets/fonts/cabin-regular.eot?#iefix') format('embedded-
opentype'), url('resources/stylesheets/fonts/cabin-regular.ttf') format('truetype'),
url('resources/stylesheets/fonts/cabin-regular.woff') format('woff');
}
The path was correct but font won't apply while am running the html.But if i specify the http path like
http_path="/somename/"
it applies. then why it won't works without specifying the http_path..?
Bringing src: url("../fonts/cabin-regular?#iefix"); before the main src make working fine
#font-face {
font-family: 'cabinregular';
src: url("../fonts/cabin-regular?#iefix");
src: url("../fonts/cabin-regular?#iefix") format("embedded-opentype"), url("../fonts/cabin-regular") format("woff"), url("../fonts/cabin-regular") format("truetype"), url("../fonts/cabin-regular.svg#cabin-regular") format("svg");
font-weight: normal;
font-style: normal;
}
When defining a custom font with the webfont loader (repo here), we basically define the families loaded and the related URLs:
WebFont.load({
custom: {
families : [ "My font" ],
urls : [ "assets/css/fonts.css" ]
}
});
But, it seems the loader don't detect multiple weight defined for the same font in the css file:
#font-face {
font-family: 'My font';
src: url("../fonts/my-font.eot");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'My font';
src: url("../fonts/my-font.eot");
font-weight: bold;
font-style: normal;
}
And so, the loader trigger the active event when the first font is loaded. This can be confirmed if we check the fontactive event who'll only be triggered once:
WebFont.load({
fontactive: function( fontname, fontdescription ) {
console.log( fontname, fontdescription );
// Only trigger once `My font, n4`
}
});
So, is there a way tell the webfont loader there's multiple weight to get (a bit like their google webfonts interface)?
(A fix can be to use multiple names for each font weight, but that's not the solution I'm searching for here)
I'm one of the developers of the webfontloader. You are correct that the custom module does not support loading multiple variations. Luckily we recently added support for this, so if you upgrade your version of the webfontloader (or use the one on the Google CDN) you'll get support for it.
You can use it like:
WebFont.load({
custom: {
families: ['My Font', 'My Other Font:n4,i4,n7'],
urls: ['/fonts.css']
}
});
To load the 'n4', 'i4' and 'n7' variations of "My Other Font".
I am trying to add Bootstrap to a Sinatra application. I have setup routes to compile bootstrap.less and responsive.less. Loading the two stylesheets separately in a web browser works as expected. But when I try to use them in a html page my application hangs. I can only stop the application with kill -9.
It seems that somehow Less imports and multiple stylesheets cause a hang of the application. I was able to isolate the problem:
app.rb
require 'rubygems'
require 'bundler/setup'
require 'sinatra'
require 'less'
get '/' do
haml :index
end
get '/style1.css' do
less :style1, :paths => ['views']
end
get '/style2.css' do
less :style2, :paths => ['views']
end
views/index.haml
!!! 5
%html
%head
%title Hello World
%link{'rel' => 'stylesheet', 'href' => 'style1.css', 'type' => 'text/css'}
%link{'rel' => 'stylesheet', 'href' => 'style2.css', 'type' => 'text/css'}
%body
%h1 Hello World
%p Hello World
views/style1.less
#import "mixins.less";
#import "shadows.less";
#color: #00eeff;
h1 {
color: #color;
}
views/mixins.less
.box-shadow(#shadow) {
-webkit-box-shadow: #shadow;
-moz-box-shadow: #shadow;
box-shadow: #shadow;
}
views/shadows.less
h1 {
.box-shadow(6px 6px 3px #888);
}
views/style2.less
#color: #ccff00;
p {
color: #color;
}
Accessing the index page hangs Sinatra. If I comment out style2.less in the html page or inline shadows.less or mixins.less in style1.less the page loads as expected.
Any idea what could be the problem or how I can debug this further?
I took your files and made small changes to them:
I renamed style2.css to style2.less so i can use Less on it, and eventually download the style2.css with the correct css syntax ---It was not working with the other extension.
And, I told Less that the path to search for directives, was the views path of Sinatra: Less.paths << settings.views.
So, with these changes, the Sinatra application stopped hanging.