The Rails 4.2 application works fine with jquery datepicker in development. However the CSS is not applied on datepicker in production running ubuntu 14.04. I redeploy the application once and run the assets precompile a few times (also delete assets under public), the CSS is still not applied to datepicker.
RAILS_ENV=production bundle exec rake assets:precompile
What could go wrong with datepicker CSS?
Here are the configuration:
In application.js, it has:
//= require jquery
//= require jquery_ujs
//= require jquery-ui
In 'Gemfile`, there are:
gem 'jquery-rails' , '<= 4.1.0'
gem 'jquery-ui-rails'
Under assets/stylesheets, there are:
I have the following in my application.css which will include the required jquery-ui css to serve
*= require jquery-ui
*= require_self
Related
I have installed bower-rails gem
then in bower file I included bootstrap-sass, it installed bootstrap-sass in vendor/assets/bower_components.
Now according to a resource bower-rails automatically takes care of adding bower_components to assets, so I am trying this in application.css
*= require_tree .
*= require_self
*= require 'bootstrap-sass'
*/
But it throws me error that bootstrap-sass file not found.
Do I have to manually add vendor/assets/bower_components to assets?
I am pretty new to rails so some explanation would help a lot.
I am following this resource
EDIT:
On doing rails c and printing Rails.application.config.assets.paths
I can see vendor/assets/bower_components in asset paths
`
Finally I resolved the issue by removing all the bower components and running
rails g bower_rails:initialize
It created an intializer for assets bower_rails.rb, which finally solved the problem
I have install "Tinymce" though bower into my rails app in vendor/assets/bower_components/tynymce-dist
I include js assets in application.js and it works ok
//= require tinymce-dist
then I include css files in application.css
#import 'tinymce-dist/skins/lightgray/skin.min.css'
it works, but I have an error in rails console
ActionController::RoutingError (No route matches [GET] "/assets/skins/lightgray/skin.min.css"):
and in chrome console
GET http://localhost:3000/assets/skins/lightgray/skin.min.css
it calls from tinymce script in that way
skinUrl = tinymce.baseURL + '/skins/' + skin;
looks like it calls absolut url.
One solucion is to use Tinymce gem, but I dont want to use this way.
How to fix this problem.
If you're using Bower in your Rails app, you'll do well looking into Rails Assets:
This basically allows you to include bower-enabled assets as gems. You just have to search for the respective gem on their app, and then add the gem to your Gemfile:
RA actually have TinyMCE-dist already:
I would personally recommend using Rails Assets - I can delete the answer if you'd rather not. It will give you the benefits of bower and the dependability of the gem system:
#Gemfile
source https://rubygems.org
source https://rails-assets.org #-> add this line
gem 'rails-assets-tinymce-dist'
Then add the following to your JS & CSS assets:
#app/assets/javascripts/application.js
//= require tinymce-dist/tinymce.js
#app/assets/stylesheets/application.css
#import 'tinymce-dist/skins/lightgray/skin'
I'm trying to add bower component (angular ui-grid) to my angularJS + Rails 4.2 application.
The component is working fine in development env, but in production env it works without its css.
I've installed the component via a bower to vendor/assets/bower_components
and made the following changes in order to integrate it into the assets pipeline:
application.css.scss
#import "angular-ui-grid/ui-grid.css";
application.js
//= require angular-ui-grid/ui-grid.min.js
//= require_tree .
application.rb
config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')
assets.rb
Rails.application.config.assets.precompile << %r(.*.(?:eot|svg|ttf|woff)$)
Rails.application.config.assets.precompile += %w( ui-grid.css )
I executed rake assets:precompile which generated the following output:
Writing /source/myapp/public/assets/application-546acf8e965ef660d80be61d1314dcef.js
Writing /source/myapp/public/assets/application-bf4c9902bcb508f0250e847dc63c3321.css
Writing /source/myapp/public/assets/angular-ui-grid/ui-grid-70f73890ff81d1e19e758473a9ff1f1e.eot
Writing /source/myapp/public/assets/angular-ui-grid/ui-grid-069439f9e57a19c07fad6095a9056446.svg
Writing /source/myapp/public/assets/angular-ui-grid/ui-grid-f681537c8135d9deb670ceadfb8eddd4.ttf
Writing /source/myapp/public/assets/angular-ui-grid/ui-grid-a3319d6298bca8dd2bcaae48735afe00.woff
Writing /source/myapp/public/assets/bootstrap-sass-official/assets/fonts/bootstrap/glyphicons-halflings-regular-e4c812e8c30abb98e787ab176cb74129.eot
Writing /source/myapp/public/assets/bootstrap-sass-official/assets/fonts/bootstrap/glyphicons-halflings-regular-c9450138a7b29547267148145ba65c3e.svg
Writing /source/myapp/public/assets/bootstrap-sass-official/assets/fonts/bootstrap/glyphicons-halflings-regular-7ef334f0e220af09b5aa3a8283ccaa6a.ttf
Writing /source/myapp/public/assets/bootstrap-sass-official/assets/fonts/bootstrap/glyphicons-halflings-regular-97811df08b2f65e376ad5b37fc5f315b.woff
For some reason the ../assets/angular-ui-grid/ui-grid.css is missing from the precompile output!
When I run my Rails app in production env (in development it works fine), the ui-grid component is running (=> the ui-grid javascript was integrated successfully into the assets pipeline), but without its css (all ui-grid.css classes), and it looks horrible.
How do I add the ui-grid.css into the assets pipeline?
I ran into the same issue. In addition to doing a sass import, you also need to do a sprockets import.
add
*= require angular-ui-grid/ui-grid.css
To the manifest, and you should be fine.
I followed the super simple direction on how to install the normalize-rails css reset gem outlined here
https://github.com/markmcconachie/normalize-rails
but I keep getting error stating that
"couldn't find file 'normalize-rails'"
when I included
*= require normalize-rails in my application.css file. I ran bundle, bundle update etc, still no dice. Am I installing this incorrectly? What I'm doing wrong?
Check this Steps:
Add gem 'normalize-rails' in your Gemfile
Run bundle install command in your terminal
Check gem is installed or not by running bundle show normalize-rails
in your terminal
restart your rails server
Add *= require normalize-rails in your application.css file before *= require_tree .
If you missed any steps then check it...
NOTE: You must using Rails 3.1+
First, run the following command to see if the gem has been installed
bundle show normalize-rails
And remember to restart your server after installing new gem :)
This is my application.css.scss
/*
*= require_self
*= require_tree .
*= require social-share-button
*/
I am using this gem - https://github.com/twbs/bootstrap-sass
Per the instructions, this is my :assets group in my Gemfile:
group :assets do
gem 'sass-rails', '~> 4.0.3'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem "font-awesome-rails"
gem 'bootstrap-sass', '~> 3.2.0'
gem 'autoprefixer-rails'
end
I created a file called bootstrap_and_overrides.css.scss, which has this:
#import "bootstrap-sprockets";
#import "bootstrap";
#import "bootstrap-responsive";
#import "font-awesome";
This is the error:
Sass::SyntaxError at /
File to import not found or unreadable: bootstrap-sprockets.
/app/assets/stylesheets/bootstrap_and_overrides.css.scss:1)
This is my application.js:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require bootstrap-sprockets
//= require social-share-button
//= require_tree .
I have restarted my server many times, and viewed my app from an Incognito window.
I am using Rails 4.1.1 and Ruby 2.1.1.
Any suggestions?
Update 1:
For what it's worth, this is what my app/assets/stylesheets/ looks like:
$ ls
application.css.scss bootstrap.css font-awesome.min.css
bootstrap-social.css bootstrap.min.css locations.css.scss
bootstrap-theme.css bootstrap_and_overrides.css.scss main.css
bootstrap-theme.min.css font-awesome.css posts.css.scss
I figured out the issue here.
The problem is I am using an :assets group. That was removed in Rails 4.
http://edgeguides.rubyonrails.org/upgrading_ruby_on_rails.html#upgrading-from-rails-3-2-to-rails-4-0-gemfile
**4.2 Gemfile**
Rails 4.0 removed the assets group from Gemfile. You'd need to remove that line from your Gemfile when upgrading.
Once I pulled them out of the assets group, deleted my Gemfile.lock and ran bundle install...everything worked perfectly.
Hope this helps some other poor soul.
I just experienced the same problem
File to import not found or unreadable: bootstrap-sprockets
I tried restarting the development server and running "rails s" again and it worked fine!
I had a similar problem but what fixed it for me was:
Kill rails server
Add instruction gem 'bootstrap-sass', '3.3.6' into my Gemfile
Run the bundle install command at the server terminal
Restart rails server
However, just to note that I am using the latest version of rails - Rails 5.0.1 so unlike version 4.2, I didn't have to worry about removing the asset do instruction within the Gemfile
this worked for me
gem 'bootstrap-sass', :git => 'https://github.com/twbs/bootstrap-sass.git', :branch => 'next'