I am definitely a novice when it comes to SCSS. I need some help.
I am using the Zurb Foundation gem with my Rails 4.2.4 project. I am trying to make some global customizations such as changing the body-bg color. I've gone into the foundation_and_overrides.scss in my assets/stylesheets folder and uncommented
$body-bg: $white;
looking to change it to $steel or some such. When I reload the page, I get
app/views/layouts/application.html.erb where line #7 raised:
Undefined variable: "$white".
application.html.erb starts out:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= content_for?(:title) ? yield(:title) : "foodian" %></title>
<meta name="description" content="<%= content_for?(:description) ? yield(:description) : "Foodian" %>">
<%= stylesheet_link_tag "application" %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%# Modernizr is required for Zurb Foundation %>
<%= javascript_include_tag 'vendor/modernizr' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
I'm sure there is something simple I am overlooking. But I can't find any "for dummies" examples of what to do. Please help.
application.css.scss
/*
* 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 bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree .
*= require_self
*/
/*= require foundation */
#import "foundation_and_overrides";
The way I had this working is to add the following line to app/assets/stylesheets/application.scss, and to add this line:
#import "foundation_and_overrides";
You can also remove any *= require foundation from the same file, as foundation_and_overrides already imports the required files.
I am not sure it is the best way, but it works with Foundation 5 (I have not tried Foundation 6 yet).
Related
I am facing this photoshop-drop-shadow while running my Rails 4.2 application in production mode.
ActionView::Template::Error (File to import not found or unreadable:
photoshop-drop-shadow. Load paths:
/home/abcuser/Desktop/project/Myproject/app/assets/images
/home/abcuser/Desktop/project/Myproject/app/assets/javascripts
/home/abcuser/Desktop/project/Myproject/app/assets/stylesheets
/home/abcuser/.rvm/gems/ruby-2.3.0/gems/tinymce-rails-4.4.0/app/assets/javascripts
/home/abcuser/.rvm/gems/ruby-2.3.0/gems/tinymce-rails-4.4.0/app/assets/source
/home/abcuser/.rvm/gems/ruby-2.3.0/gems/tinymce-rails-4.4.0/vendor/assets/javascripts
/home/abcuser/.rvm/gems/ruby-2.3.0/gems/remotipart-1.2.1/vendor/assets/javascripts
/home/abcuser/.rvm/gems/ruby-2.3.0/gems/bourbon-4.2.7/app/assets/stylesheets
/home/abcuser/.rvm/gems/ruby-2.3.0/gems/css3buttons-1.0.1/lib/assets/images
/home/abcuser/.rvm/gems/ruby-2.3.0/gems/css3buttons-1.0.1/lib/assets/stylesheets
/home/abcuser/.rvm/gems/ruby-2.3.0/gems/client_side_validations-4.2.5/vendor/assets/javascripts
/home/abcuser/.rvm/gems/ruby-2.3.0/gems/jquery-ui-rails-5.0.5/app/assets/images
/home/abcuser/.rvm/gems/ruby-2.3.0/gems/jquery-ui-rails-5.0.5/app/assets/javascripts
/home/abcuser/.rvm/gems/ruby-2.3.0/gems/jquery-ui-rails-5.0.5/app/assets/stylesheets
/home/abcuser/.rvm/gems/ruby-2.3.0/gems/jquery-rails-4.1.1/vendor/assets/javascripts
/home/abcuser/.rvm/gems/ruby-2.3.0/gems/compass-core-1.0.3/stylesheets):
5: <meta charset="UTF-8">
6: <title><%= Rails.application.config.custom.app_name %></title>
7: <%#= stylesheet_link_tag "marketing" %>
8: <%= javascript_include_tag "application" %>
9: <link rel="stylesheet" href="/marketing/css/vendor/bootstrap.css">
10: <link rel="stylesheet" href="/marketing/css/all.css">
11: <link rel="stylesheet" href="/marketing/css/colorbox.css">
app/assets/stylesheets/report.scss.erb:6
app/views/layouts/public.html.erb:8:in
`_app_views_layouts_public_html_erb__559746694008157479_39976240'
These are my 1st 9 lines in the report.scss.erb:
/* We broke this out of default.css file becuase it inteferring with siilar classes that were overloaded by another dev for the new version of the report/nudge show view */
#import "compass";
#import "bourbon";
#import "photoshop-drop-shadow";
#this is the line it is showing error.
#master-photos-container{height:485px;margin-top:20px;}
#photos #paging-left {float:left;height:205px;width:21px;padding-top:185px;padding-left:15px;}
#photos #paging-right {float:left;height:205px;width:21px;padding-top:185px;}
I am including report.css in application.css as:
*= require report
It is working fine in development mode, I don't know why it is not running production mode.
I am very much worried home page, please help.
So this is strange.. On my site, the image assets are getting properly fingerprinted but not the stylesheets and javascript files.
Here's what the link looks like in my view:
<%= stylesheet_link_tag "website", media: "all",
"data-turbolinks-track" => true %>
<%= javascript_include_tag "website",
"data-turbolinks-track" => true %>
And this is what it looks like once pushed to production:
<link data-turbolinks-track="true" href="/stylesheets/website.css"
media="all" rel="stylesheet" />
<script data-turbolinks-track="true"
src="/javascripts/website.js"></script>
.. while my images are properly fingerprinted:
<img src="assets/website/white-logo-904f6978b5ecfdad3fdb8ad8d3a995b6.png">
Any ideas as to why I'm getting this strange behavior, and how I can get it fixed?
Rails v4.0.4 / Ruby 2.1.2
By convention, the Rails asset pipeline recognizes application.js and application.css as the main asset manifest files.
If you want to include separate files, then you'll need to specify them to be precompiled in the environment config or in an initializer.
Try this:
# config/production.rb
config.assets.precompile += %w( website.js website.css )
Rails 4
How can I include/exclude manifests based on their controllers?
I have application.css - which includes global assets used by all layouts.
In addition, I have a frontend.css and a dashboard.css
I would like application.html.erb to include application.css and frontend.css, but exclude dashboard.css
I would like dashboard.html.erb to include application.css and dashboard.css, but exclude frontend.css
How should I structure my assets, and what should the layout files and manifests look like?
I would do this:
#app/views/layouts/application.html.erb
<%= stylesheet_include_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= stylesheet_include_tag type, media: "all", "data-turbolinks-track" => true %>
#app/helpers/application_helper.rb
def type
controller_name == "dashboard" ? "dashboard" : "frontend"
end
#app/assets/stylesheets/application.css
/* global manifest -- fonts etc */
#app/assets/stylesheets/dashboard.css
/* dashboard specific */
#app/assets/stylesheets/frontend.css
/* frontend specific */
Basically, I would put some logic in the layout, which could be condensed to a helper, to determine which controller / conditions are valid to load up dashboard.css / frontend.css
Hope this helps?
I would like to exclude a specific folder from assets/javascripts in my application.html.haml
The folder that I do not want to be included in my layout is mobile folder
Here's my layout:
%html(lang="en")
%head
%meta(charset="utf-8")
%meta(http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1")
%meta(name="viewport" content="width=device-width, initial-scale=1.0")
%title= content_for?(:title) ? yield(:title) : #user.name ? 'Niche | ' + #user.name : 'Niche'
= csrf_meta_tags
= analytics_init if Rails.env.production?
/ Le HTML5 shim, for IE6-8 support of HTML elements
/[if lt IE 9]
= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"
= stylesheet_link_tag "application", :media => "all"
%body#profile
%section.persist-area
%header.global.profile
%div.container
%a.brand.pull-left{ :href => root_path }
.logo-niche
%nav.pull-right
= render 'layouts/menu'
.container-fluid#main
= yield :profile
/
Javascripts
\==================================================
/ Placed at the end of the document so the pages load faster
= javascript_include_tag "application"
= yield :javascript
In this snippet, I am getting all JS:
= javascript_include_tag "application"
But I want to get all JS except the folder named mobile
I tried the following workaround but did not work:
= javascript_include_tag "application", except: "mobile"
Sorry that was just a wild guess. There's no javascript_exclude_tag too as per the docs.
Any ideas? Thanks.
PS: I have a different layout for mobile, so that's why I really want to exclude that folder in desktop view. It's conflicting a lot of conflicts in my desktop view.
Change in application.js
//= require_tree
to
//= require_directory .
or
//= require_tree ./useful
So that, app/assets/javascripts/* files will be included and app/assets/javascripts/mobile/* wont be included.
I got this problem writing the website with Ruby on Rails.
bundle show
* jquery-ui-rails (4.0.1)
In app/assets/javascripts/application.js
//= require jquery.ui.datepicker
In app/assets/stylesheets/application.css
*= require jquery.ui.datepicker
In app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
And then in somepage.html.erb, I got
<script type="text/javascript">
$(function(){
$("#startdate").datepicker();
$("#enddate").datepicker();
});
</script>
When running it, Chrome says that
Uncaught TypeError: Object [object Object] has no method 'datepicker'
I suppose that resource not being referred properly is the cause because the problem could be fixed by adding the follows into app/views/layouts/application.html.erb
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
These could be found at http://jqueryui.com/datepicker/. I saw demos having working datepickers without these codes. But I do not understand why it is not working in mine. Anyone got any suggestions? like something to add other than those I mentioned above?
It probably because of either of the following:
1) You are including multiple javascript files in your application.html.erb which is leading to havoc when put altogether.
2) You are using some other javascript file that also using $ just like jquery is using.
Having two same symbols is the possible cause of getting no method 'datepicker' for the jquery.
The alternative is to replace all the occurences of $ with jQuery
OR
Just wrap your jquery code insode a block like the following:
jQuery(function($){
//all jQuery code which uses $ should be here.
});