I must be missing something really simple, but I could not find anyone else with the problem.
Basically, Rails 3.1 merges all the .css files into application.css. After I installed ActiveAdmin, ActiveAdmin's CSS are also merged into application.css, causes conflict and overrides my stylesheet.
What am I missing here?
I removed *= require_tree . from application.css and added each other css individually. Not sure whether this is the best way, but it works.
I solved it by adding the generated active_admin css and js in the vendor directory..
vendor/assets/stylesheets/active_admin.css.scss
vendor/assets/active_admin.js
Related
Many jQuery plugins have the following directory structures:
/<plugin name>
../css
../images
../js
The CSS files usually have relative links to the images in them. What I want to do is include these plugins in the Rails Way under the Asset Pipeline, and hopefully that doesn't involve having to renamed the file references to remove the relative links. Is there such a Rails Way?
Could it also be that it's overkill to include an already-minified jQuery plugin in the Asset Pipeline?
You should try to add your assets to the load path which is the recommended way, as far as I know. If the application you're running has the assets-pipeline activated, it should find your assets after expanding the path in your application.rb
config.assets.paths << Rails.root.join("plugins/plugin_name/assets/")
Not shure, if this is what you asked for but if not, you should check: http://guides.rubyonrails.org/asset_pipeline.html#asset-organization
Remeber to restart your server
I had the same issue and also tried to find "the Rails way" to do this. And this is what I ended up with at the end of the day:
As Rob already mentioned:
vendor/assets is for assets that are owned by outside entities, such as code for JavaScript plugins and CSS frameworks.
Source: 2.1 Asset Organization
Lets take a practical example: using the jquery_datepicker gem (Note: we had to use a workaround because of this issue: bundle pack does not work with git sources).
1) Installing the gem (pretty straighforward):
cd vendor/gems
git clone https://github.com/albertopq/jquery_datepicker.git
2) Add this to your Gemfile
gem 'jquery_datepicker', :path => 'vendor/gems/jquery_datepicker'
3) Install a jquery-ui theme
From ThemeRoller select a theme, check Datepicker and Slider
and the jQUery version
Download and extract the content of the package
CSS/images from the css/theme-name folder move them:
jquery-ui-1.8.xx.custom.css to app/vendor/stylesheets/
the images folder to app/vendor/images/ (yes, move the entire folder images so you end up with something like this app/vendor/images/images/ui-icons_256x240.png
i18n from the development-bundle/ui/i18n folder (optional) move them to:
Create a folder i18n under app/vendor/javascripts/
move jquery.ui.datepicker-xx.js to this folder app/vendor/javascripts/i18n/
make sure the i18n folder is loaded so include in application.js
//= require_directory ./i18n
vendor/assets is loaded automatically AFAIK so you don't have to include the path in the asset pipeline.
I'd like to see how others are approaching this, it's a very good question.
I think the reason you haven't received an answer is because it's kind of unclear what you're asking. Are you asking if it's overkill to put your plugins in the asset pipeline? Are you asking if you have to rename file references?
I always put all my jquery plugins in my asset pipeline. Overkill or not, there all in one place and they only get compiled once so even if compiling them takes longer, it doesn't affect my app.
I hvae a Rails 3.2.x application that uses a 3rd party JS library which itself includes a few CSS files. When I precompile assets all of my JS goes into application.js and all the CSS into application.css.
I'd like for the CSS files, which I have put into vendor/assets/stylesheets to be excluded from precompilation but still available so the JS library can use them. Any suggestions on how I might do that?
Just Remove the following lines from application.css
in assets/stylesheets directory
*= require_self
*= require_tree .
These lines by default selects all the files in stylesheets directory for compilation..
I upgraded to rails 3.1.3 a few weeks ago, and moved a bunch of stuff around to use backbone.
Mostly, things are going well, but I just realized that the rails-ujs.js file and remotipart.js files are not in the assets directory.
I've looked for them in the old public/javascripts folder, as well as everywhere else, but no luck finding them.
I also can't seem to find the files in the git repos. Is there somewhere to download these files in Javascript? or do they need to be generated by rails? Is there a way to regenerate them?
---------------this could be my error ----------------------------
I just realized that with the assets packed, you can't just open a file from view source, they all show as non-existent.
I think theses files lived in the rails ujs plugins in asset directory. so you need to add it to your Gemfile and the asset pipeline should see them automaticaly.
all files here https://github.com/rails/jquery-ujs/tree/master/src are available to include in your js file with
//= require jquery
//= require jquery_ujs
see plugin readme for more informations
You need to include this in your Gemfile:
gem 'jquery-rails'
That is the official plugin for this code.
Run bundle install.
Then you add the lines:
//= require jquery
//= require jquery_ujs
to you application.js file.
Hello I have one question I have my file main.scss which is in public/stylesheets/scss. In documentation is written:
By default, .sass and .scss files are
placed in public/stylesheets/sass
(this can be customized with the
:template_location option). Then,
whenever necessary, they’re compiled
into corresponding CSS files in
public/stylesheets. For instance,
public/stylesheets/sass/main.scss
would be compiled to
public/stylesheets/main.css.
I have in my gemfile gem 'haml'
And from my view I do sth like this
= stylesheet_link_tag 'main'
And the file is not found when I check the source(there is a file with with information about routing error). I guess that compiling it by hand it is not way to go so how I can make compile scss file to public/stylesheets automatic? What mean in documentation that they are compiled when necessary?
Thanks in advance
Put your .sass or .scss files in public/stylesheets/sass, not public/stylesheets/scss. Then the stylesheets should automatically generate whenever you change the corresponding sass/scss file. The generated stylesheets end up in public/stylesheets/.
Renaming the folder should make it all work.
EDIT: it looks like Rails 3.1 is going to be not only including SASS by default, but it will also be moving most of the stuff found in the public folder to the app folder... so this answer will only apply to versions of rails before 3.1.
I am trying to get SASS to work with Rails 3.
I have added gem 'haml' to my Gemfile (and ran bundle install) and I have added a styles.scss to my public/ directory, but it does not seem to be working. Can someone help me out? Thanks!
By default, Sass expects sass/scss files to go in public/stylesheets/sass, which are then compiled into css files in public. You can change this path by setting Sass::Plugin.options[:template_location] in your config, though.