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
Related
I recently upgraded my Sprockets from 3.7.2 to 4.0.2 and since then my application.css file cannot recognize one of the files that has been written in scss:
*= require editor/content-tools.scss
*=/ require_tree .
*=/ require_self
*/
(editor/content-tools.scss is located in vendor, not in app/assets).
While I try to execute it I receive this error:
ActionView::Template::Error (couldn't find file 'editor/content-tools.scss' with type 'text/css'
Sprockets is looking for a 'text/css' type file and if I rename my file to content-tools.css it stop producing errors, which eliminates possible problems related to path findings.
So my question is how can I tell sprockets to check look for files with .scss extensions in my application.css as it did before?
From sass-rails
Sprockets provides some directives that are placed inside of comments called require, require_tree, and require_self. DO NOT USE THEM IN YOUR SASS/SCSS FILES. They are very primitive and do not work well with Sass files. Instead, use Sass's native #import directive which sass-rails has customized to integrate with the conventions of your Rails projects.
So you could achieve that by:
Rename application.css to application.scss
Use import syntax instead of require:
// application.scss
#import "editor/content-tools.scss";
#import "*";
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
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 :)