I'm working on a simple ruby on rails application and I am getting the following error:
TypeError: Cannot read property 'process' of undefined (in/home/saasbook/Documents/projects/Bookkeeper/app/assets/stylesheets/application.css.sass)
The Extracted source is as follows:
<html>
<head>
<title>Bookkeeper</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> //Highlighted error line in extract
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
This error occurred after I added Bootstrap Sass by Using the Bootstrap Sass plugin and following this tutorial
Below the extract its stated that the error is at:
app/views/layouts/application.html.erb:5:in_app_views_layouts_application_html_erb__226809778_88444660'
My code
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Bookkeeper</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> //Highlighted error line in extract
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
application.css.sass
/*
* 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
*/
#import "bootstrap-sprockets"
#import "bootstrap"
The page shows this title in the red border on top, is this any help?
ExecJS::ProgramError in Portal#index
There seems to be an issue with version 5.0 of the autoprefixer-rails gem. Try downgrading to 4.0.2.2.
https://github.com/ai/autoprefixer-rails/issues/47
This will pop up if you are using Node instead of RubyRacer as your JS runtime.
EDIT -
This has been fixed in the latest version of autoprefixer.
bundle update autoprefixer-rails
This has been fixed in the latest release of autoprefixer. Upgrade using the following command -
bundle update autoprefixer-rails
Related
I have recently upgraded my app from Rails 4.2.6 to Rails 5.2.3.
I followed the procedure as on Rails Guides
Now, when I try to start my development server, it starts without any error.
But when I hit the URL in the browser an error comes up which says:
Sprockets::FileNotFound in UserSessions#new
Showing /home/pranjal/source/my-app/app/views/layouts/application.html.erb where line #5 raised:
couldn't find file 'selectize.source.css'
Checked in these paths:
/home/pranjal/source/my-app/app/assets/config
/home/pranjal/source/my-app/app/assets/font-awesome
/home/pranjal/source/my-app/app/assets/fonts
/home/pranjal/source/my-app/app/assets/images
/home/pranjal/source/my-app/app/assets/javascripts
/home/pranjal/source/my-app/app/assets/stylesheets
/home/pranjal/source/my-app/vendor/assets/javascripts
/home/pranjal/source/my-app/vendor/assets/stylesheets
...
Extracted source (around line #5):
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
Looks like issue of incompatibility between js and new version of rails try to use/upgrade selectize-rails gem and remove js and css files from repo (if exists).
I am working in Spree commerce application. There I made a custom home page.
for this home page I want to render a new layout.
I created a new layout file also for that, under app/views/layouts/landing.html.erb but no default css was calling in this case. please have a look on below snapshot
enter image description here
Controller Code: app/controllers/home_controller
class HomeController < Spree::StoreController
layout 'landing'
def index
end
end
Layout: app/views/layouts/landing.html.slim
doctype html
html
head
title
| Multistore
= csrf_meta_tags
= csp_meta_tag
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
body
= yield
https://edgeguides.rubyonrails.org/layouts_and_rendering.html#finding-layouts
You should make layout file in app/views/layouts directory.
In this case, try to move landing.html.slim in app/views/layouts/landing.html.slim
I am trying to run a project on digital ocean's ububtu droplet. As soon as I try to install a template, I get We're sorry, but something went wrong.
If I look in my error logs, I see
I, [2016-07-30T23:49:55.921388 #9319] INFO -- : Started GET "/" for 73.160.138.220 at 2016-07-30 23:49:55 -0400
I, [2016-07-30T23:49:55.961647 #9319] INFO -- : Processing by HomeController#index as HTML
I, [2016-07-30T23:49:55.983520 #9319] INFO -- : Rendered home/index.html.erb within layouts/application (1.6ms)
I, [2016-07-30T23:49:56.628915 #9319] INFO -- : Completed 500 Internal Server Error in 667ms (ActiveRecord: 0.0ms)
F, [2016-07-30T23:49:56.631911 #9319] FATAL -- :
ActionView::Template::Error (Invalid CSS after "...ound-position: ": expected expression (e.g. 1px, bold), was "[headerposition];"):
11: <title>Christopher G. Mendla - Personal and Professional Site</title>
12:
13: <!-- From ruby begin -->
14: <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
15:
16: <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
17: <%= csrf_meta_tags %>
app/views/layouts/application.html.erb:14:in `_app_views_layouts_application_html_erb___1821054907133950454_37150040'
I had the site loaded on Digital ocean before with this template. I seem to rememebr that there was a problem with lines 14 and 16 above and I had to do something different but I can't remember what.
The portion of application.html.erb with the stylesheet tags is
<!-- From ruby begin -->
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<!-- From end begin -->
<!-- The following is added to connect the template to ruby -->
<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" %>
<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" %>
<%= stylesheet_link_tag "style" %> <!-- From template -->
<%= stylesheet_link_tag "style.ie7" %> <!-- From template -->
<%= stylesheet_link_tag "style.responsive" %> <!-- From template -->
<%= javascript_include_tag "script.js" %> <!-- From template -->
<!-- < %= javascript_include_tag "jquery.are-you-sure" %> --> <!-- Dirty form checker -->
<%= javascript_include_tag 'defaults' %>
<%= csrf_meta_tags %> <!-- cross-site request forgery protection parameter -->
I did do rake assets:clobber and rake assets:precompile
assets.rb has
Rails.application.config.assets.compile = true #for Production
Rails.application. config.assets.precompile = ['*.js', '*.css', '*.css.erb'] #for Production
Rails.application.config.assets.precompile += %w[*.png *.jpg *.jpeg *.gif] #for Production
Rails.application.config.assets.precompile += %w(script.js)
Rails.application.config.assets.precompile += %w(script.responsive.js)
Rails.application.config.assets.precompile += %w( style.css )
Rails.application.config.assets.precompile += %w( style.responsive.css )
Rails.application.config.assets.precompile += %w( style.ie7.css )
If I change application.html.erb to simply be <%= yield %> then the site shows up without an error. I can't figure out where the error message is pointing in my css
I do see lines such as the following in style.css but I can't figure out which, if any of those lines is causing the problem
ul.art-vmenu ul a:hover:after
{
background-position: center ;
}
ul.art-vmenu ul a.active:hover:after
{
background-position: center ;
}
ul.art-vmenu ul a.active:after
{
background-position: bottom ;
}
I've just created a test project and been reading about the assets pipeline. So far, the assets are being loaded but not applied, as if I go to localhost:3000/assets/application.css I see the style I've written but I don't see the rules applied to the DOM.
Rails version: 4.2.1
Ruby version: 2.2.0
The structure is the following:
app
--- assets
------ images
------ javascripts
------ stylesheets
------------ application.css
------------ todos.css
The content of application.css is the following:
/*
*= require_tree .
*= require_self
*/
The content of application.js the following:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
The rails APP is very simple, as it's just a model (todo.rb), the controller for that model (todos_controller.rb) with the following content:
class TodosController < ActionController::Base
def index
#todos = Todo.all
end
end
Very simple, and for the view I'm using Slim templates with the following hierarchy:
app
--- views
------ todos
--------- index.slim
The content of application.html.erb is the following:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
And for the view:
.todos
- #todos.each do |todo|
.title = todo.title
.content = todo.content
Is there about the assets pipeline I'm missing? Thanks in advance.
Rename index.slim into index.html.slim.
P.S. convention over configuration
The TodosController must inherit from ApplicationController, not from ActionController::Base
class TodosController < ApplicationController
def index
#todos = Todo.all
end
end
In my application layout I have this conditional which helps deciding what stylesheet to use based on existence of current_user:
<% if current_user %>
<%= stylesheet_link_tag 'application', media: 'all', id: "maincss" %>
<% else %>
<%= stylesheet_link_tag 'session', media: 'all', id: "maincss" %>
<% end %>
But how can I specify which stylesheet to use based on the url?
For example, I want to use a 'password_reset.css' file for this path
get '/set/:password_reset_token' => 'password_resets#edit'
Here is what I do in my projects:
In the layout file, add a yield method like this:
<html>
<head>
...
...
<%= yield(:head) %>
</head>
...
In any view page (.erb file) that needs a custom CSS, I would add something like this at the top of the page.
<% content_for :head do %>
<%= stylesheet_link_tag 'custom_css_filename', media: 'all' %>
<% end %>
This way stylesheet will go in the right place only for that page.
Note:
If you want to include a custom stylesheet for every single URL in your application, you should use what is suggested in the previous answer.
You can try using
<%= stylesheet_link_tag *([params[:controller], params[:action]] + (params[:id] || '').split('/')) %>
If you are okay with using password_resets.css instead of password_reset.css
Note: You may get a few unwanted link tags as well, which may result in harmless(except to logs) 404 responses