I've got a bunch of 'bootstrap' sass files I'd like to stick in my applications /lib directory, following the new conventions of the asset pipeline.
However, I need to import these into my application.css.scss rather than requiring them, as I would like to share some color variables etc. throughout the app. I have not been able to figure out a way to get #import to grab a .scss file from /lib/assets/stylesheets.
Any suggestions?
#import should look for any .css.scss files located in your assets load path, be it in app/assets/stylesheets, lib/assets/stylesheets, vendor/assets/stylesheets, or any additional paths added by gems, so it's odd that you're getting an error.
Note you do not need to pass a folder name when using #import unless the file is in a subdirectory of assets/stylesheets - sass-rails will look through every folder on your load path and see if the resource exists relative to those folders.
To ensure that lib/assets/stylesheets is in your assets load path (which it should be, since it's a default option) crack open a Rails prompt and type Rails.application.config.assets.paths. As an example, here's the result for one of my applications:
ruby-1.9.3-p0 :012 > Rails.application.config.assets.paths
=> ["/Users/tom/ruby/qa/app/assets/images",
"/Users/tom/ruby/qa/app/assets/javascripts",
"/Users/tom/ruby/qa/app/assets/stylesheets",
"/Users/tom/ruby/qa/lib/assets/stylesheets",
"/Users/tom/ruby/qa/vendor/assets/javascripts",
"/Users/tom/ruby/qa/vendor/assets/stylesheets",
"/Users/tom/.rvm/gems/ruby-1.9.3-p0/gems/jquery-rails-1.0.14/vendor/assets/javascripts",
"/Users/tom/.rvm/gems/ruby-1.9.3-p0/gems/bootstrap-sass-1.4.0/vendor/assets/javascripts",
"/Users/tom/.rvm/gems/ruby-1.9.3-p0/gems/bootstrap-sass-1.4.0/vendor/assets/stylesheets"]
It's also worth ensuring that sass-rails is up to date and running the latest version, since I believe early versions had limit support in terms of cross-folder #import.
N.B: I also believe that convention suggests files such as Bootstrap or jQuery should go in your vendor/assets folder rather than lib/assets
I had the same problem, and it was because i forgot restart server after add files to lib directory.
Related
I'm wondering what the best way is to use images & fonts from bower packages with middleman. As an example, I'm trying to add the slick.js carousel to my project. It's on bower and includes css, js, images, and fonts in the bower code.
With middleman, I have things set up where I've added the bower_components directory to the path for sprockets and compass, so the scss and js files are getting compiled correctly and working fine.
But the images and fonts aren't getting put anywhere where they'll be used. The slick.js library uses scss and is set up to use the compass image-url and font-url functions if they exist, meaning I need to somehow get the assets from the bower_components directory to be served from the same place as all my own images and fonts, and in a way that works in both the development middleman server mode as well as when running build.
How do I do this?
Obviously possible solutions are just to vendorize the slick.js library directly into my code or include it from the cdn where it's already hosted and not worry about not having it compiled into my single css and js files. Either could work fine but I'm wondering about the general case, surely this is common scenario for anyone using bower and middleman.
I figured it out - I thought compass was for requiring scss files and sprockets was just for the js, but middleman also uses sprockets (the middleman-sprockets library) for copying arbitrary static assets.
It's a bit manual and verbose (if there were a lot more files middleman suggests writing a script to auto-discover them by file extension types and import them) but my solution is to include the following in the config.rb file:
# set local vars I'll need to access later
images_dir = 'images'
set :images_dir, images_dir
# ... other config
sprockets.import_asset('slick-carousel/slick/ajax-loader.gif') {|p| "#{images_dir}/ajax-loader.gif"}
I use grunt, but it's the same issue. Generally you have the following options:
-Commit what you need in the bower_components directory right in to source control and reference your resources from there (somewhat recommended especially if something external is down when you are doing a build), or if you don't like exposing bower_components in URLs, create a route that directs to your bower_components folder
-Copy components on build/middleman script execution to a specified path. There will be no resources to check in for this option, you just choose a destination to reference in your code and have middleman copy your components out there.
I've got a Rails site with a Jekyll blog incorporated, using the Bloggy gem.
I'd like a similar look for the main site and the blog, so I want to use the css in app/assets/stylesheets, but those files are in css.scss format. Jekyll (in a Bloggy setup) looks for css in config/jekyll/css, and seems to only want .css files; symlinking the Rails css directory into the Jekyll hierarchy doesn't seem to to work.
Is there a way to take advantage of the asset pipeline so that when I run jekyll:build, SCSS files from the Rails app are made into CSS files, placed in the appropriate jekyll directory, and bundled with the latest Jekyll build as it's placed into the /public/blog folder?
Thanks!
Ended up getting through this by:
Using the jekyll-sass gem to allow automatic transformation of the Rails app's .css.scss into .css.css files. By symlinking the Rails app/assets/stylesheets directory into Bloggy's config/jekyll/css, this put files with the right content but wrong extensions in the correct place.
Writing a rake task to make the .css.css files into .css files.
desc 'Make .css.css files into .css files'
task :css_css do
Dir.glob('public/blog/css/*.css.css').each do |file|
puts `mv #{file} #{file.gsub(/\.css\.css$/, '.css')}`
end
end
Not the prettiest solution, but it works.
#Matthew.. You have a nice solution.. For this part I did some stuffs manually. Like I added config/jekyll/css files as .css extension rather than .css.scss so when we run "rake generate" for bloggy the right format files are created on the folder public/blog/ rather css.scss.
I have made the changes in my bloggy portfolio theme project repository. If you are planning to use my version of code, I have did some changes like added robots.txt, sitemap, and integrated bootstrap to the project. I have also removed all database connections from the rails project since it was showing errors while deploying into heroku.
I have a super simple engine for loading some vendored assets: https://github.com/febuiles/strap_on
I include it in my application's Gemfile like this: gem "strap_on".
In my application.css file I have: *= require twitter_bootstrap.
I start the application and I get couldn't find file 'twitter_bootstrap'.
I've notice that the path for the engine is not in Rails.application.config.assets.paths. Any idea of what I might be doing wrong here?
In your gemspec file - it doesnt look like you include files from the vendor directory, guessing that is your main issue, check asset path after adding and reinstalling - if you look in your gem repository now, i am guessing the files in vendor are not included
Also i would move twitter_bootstrap.js into the twiiter_bootstrap directory and rename it index.js, not sure if this is required or not (you will need to update paths in that file also)
You might also be interested in this post? http://house9.blogspot.com/2011/06/rails-31-asset-gem.html
I have a Rails 3.1 application that uses SASS. The application.css.scss file looks like:
#import 'reset.css';
#import '960.css';
#import 'pages/master.css.scss';
I have a watchr script that touches application.css.scss whenever one of the #imported files is changed.
For a while this setup worked fine. Ever since last week (and I'm not sure why), Rails has been pulling a cached version of application.css for the webpages despite all my attempts at restarting the app, re-touching application.css.scss, etc. I've also deleted .sass-cache to no effect.
Any ideas?
I had the same issue. I stopped the server, executed rm -fr tmp/cache, and my css files were finally rebuild.
First, the usual cache clearing sanity checks might help. Clear browser cache. Clear server file cache (if you're in dev/test or can afford to in production) and sass-cache :
rake tmp:cache:clear
rm -fr tmp/sass-cache #or 'compass clean' if using compass
If that doesn't help, maybe Rails compiled ANOTHER application.css elsewhere (that didn't get removed by the cache clearing)?
For example, I ran compass watch app/assets/stylesheets/application.css.scss for debugging purposes and it created a public/assets/application.css file which, by virtue of it's location in public/, prevented any new application.css.scss stylesheet changes from being noticed by Rails. Once I removed it, the application again pulled from the .scss stylesheets. This is just one example of accidental overriding file creation. Try running a find on the entire application directory looking for any generated application.css files, doing this after the cache clearing to avoid those showing up in your results.
(FYI, to avoid my specific issue, I now run compass watch with --css-dir pointed at the cache to prevent my issue
$ compass watch app/assets/stylesheets/application.css.scss --css-dir tmp/cache/
)
I've had a similiar issue after running rake assets:precompile in development. Maybe Rails is serving precompiled assets from public/assets? Try cleaning that up.
You shouldn't need to touch aplication.css.scss in development, rails should serve the new content whenever one of the #included files changes.
Also, make sure you have the following in config/environments/development.rb
# Do not compress assets
config.assets.compress = false
# Expands the lines which load the assets
config.assets.debug = true
If you replace #import 'file.css'; with #import 'file'; in your application.scss that should allow it to be auto-refreshed in development mode
I had been using bin/rails tmp:clear until I removed the file extension
To wipe out the asset pipeline cache, a brute force rm -rf tmp/* will
suffice. This has certainly fixed a few otherwise inexplicable CSS and
JavaScript glitches in my experience. As a preventative measure, it
might also be a good idea to clear the cache after upgrading gems or
changing the asset pipeline configuration, although this may just be
superstition.
Finally, if you are experimenting with rake assets:precompile in your
development environment (more on this in a later article), you’ll also
want to rm -rf public/assets/* afterwards to clean that up.
http://blog.55minutes.com/2012/02/untangling-the-rails-asset-pipeline-part-1-caches-and-compass/
You can invoke Rails automagic cache busting by doing the following:
Rename the SASS file as a partial, i.e. with an underscore prefix. E.g. _master.css.scss
Remove the extension from the import. You can keep the paths, but exclude the underscore. E.g. #import 'pages/master';
Now you can make changes in master and have them reflected without messing with the cache manually.
(Note: I'm on Rails 4.2)
I had a similar issue with Rails 6.0.3.1 today. I had to re-touch application.scss so that rails didn't use the cached version.
Running rake tmp:cache:clear helped, but it's annoying because I had to run the command every time I updated any partial scss file. :(
Random I was having a caching issue related to using twitter bootstrap and application.css.scss. Basically I changed application.css.scss to just plain application.css and fixed my problem. Maybe this can help you? If you haven't figured it out already.
I was having this problem, but I was actually putting css into application.css, rather than into files that it included. I cleared out application.css to simply include all of my css. So, my application.css now looks like this:
/*
* 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 top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require 'bootstrap.min'
*= require 'global'
*/
My changes are reflected any time I change one of the included files (e.g. global.css)
When user uploads files. In Rails 3.0+, these would go into public/uploads. In 3.1, should uploaded files go to app/assets/uploads? Or still in public/uploads?
It's not really an issue in our environment, since we are using S3. Just trying to understand Rails 3.1's new directory structure.
What are your thoughts?
the public directory, capistrano recommends public/system/
don't get confused by the app/assets directory, it's usually for css/js/coffeescript files, think this is the biggest change from 3.0 to 3.1
Well, the answer is simple: your users will only have access to your /public directory.
There are just some tricks to get css and js but you'll have to stick with /public for the other stuff.
Generally, I put all stuff in /public/assets
adding on to apneadiving's answer:
if you use Carrierwave , the temporary files are in your system's /tmp directory and the uploaded files are in a subdirectory underneath $RAILS_ROOT/public , e.g. $RAILS_ROOT/public/uploads/YOUR-MODEL/...
In Rails 3.1 the 'assets' directory is meant for the JavaScript and CSS files so that sprockets can pick them up there and so that they are not accessible directly via the "public" directory...
see: assets/javascripts/application.js and assets/stylesheets/application.css files
see: http://railscasts.com/episodes/265-rails-3-1-overview
The app/assets directory is for CoffeeScript files (also not publicly accessible, so not a place to put uploads)
Putting uploaded files in the filesystem only works if you have one file server or a network mapped storage... I usually just put the files in the database itself.
But as vrsmn said, don't use assets for this, assets pipeline is for streamlining the css/js/application images.