What is the cleanest way to import twitter-bootstrap into rails without any gem?
So far I've been manually copying the css/js files into vendor/assets/javascripts, vendor/assets/stylesheets
Is there a way to do this without moving the files into separate folders?
You could all CSS and JS in vendor/assets/twitter-bootstrap.
Then in app/assets/javascripts/application.js:
//=require_tree ../../../vendor/assets/twitter-bootstrap
And in your app/assets/stylesheets/application.css:
*= require ../../../vendor/assets/twitter-bootstrap
For non JS or CSS assets like images to go in non-standard directory, in either config/application.rb or environment-specific config, you'd use:
# can add more than one path string or regexp(s)
config.assets.precompile += ['../../../vendor/assets/twitter-bootstrap/*.png']
The recommended way is to either use a well-maintained gem for your assets, or continue to put vendor JS and CSS assets in vendor/assets/javascripts and vendor/assets/stylesheets, respectively.
I copied bootstrap into lib/bootstrap
I'm using make bootstrap to compile it, then running a rake task to copy the compiled files into vendor/assets
require 'fileutils'
task :bootme do
compiled_bootstrap = 'lib/bootstrap/bootstrap'
FileUtils.cp_r(compiled_bootstrap + '/css/.', 'vendor/assets/stylesheets/')
FileUtils.cp_r(compiled_bootstrap + '/img/.', 'vendor/assets/images/')
FileUtils.cp_r(compiled_bootstrap + '/js/.', 'vendor/assets/javascripts/')
end
Related
I've found several different threads on including assets in the vendor/assets directory but did not find anything that worked for me. Previously, I had all of my vendor assets in the app/ directory but moved the JavaScript to the vendor/assets/javascripts/ directory and the CSS to the vendor/assets/stylesheets/ directory.
I'm now trying to load my vendor assets both in development and production, and they're not loading at all. Here's my assets.rb file:
# Be sure to restart your server when you modify this file.
# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'
# Add additional assets to the asset load path
# Rails.application.config.assets.paths << Emoji.images_path
# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
Rails.application.config.assets.precompile += [
Rails.root.join('vendor/assets/javascripts/*').to_s,
Rails.root.join('vendor/assets/stylesheets/*').to_s
]
I've also tried adding the vendor/assets/ directories to Rails.application.config.assets.paths, and that didn't help.
How can I include all of the vendor assets in the asset pipeline?
UPDATE
I got my vendor JavaScript to load by adding the following to app/assets/javascripts/application.js:
//= require_tree ../../../vendor/assets/javascripts/.
However, I'm using Sass and am still not able to get the SCSS files to load.
I finally figured it out after remembering that the Rails asset load paths and Sprockets are different systems. Here's what I did:
In config/initializes/assets.rb, I added the following lines:
# Add additional assets to the asset load path
Rails.application.config.assets.paths += [
Rails.root.join('vendor', 'assets').to_s
]
# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
Rails.application.config.assets.precompile += [
Rails.root.join('vendor/assets/javascripts/*').to_s,
Rails.root.join('vendor/assets/stylesheets/*').to_s
]
The first block adds vendor assets to the Rails asset path. This allows me to use vendor assets in view helpers (ex: image_tag). The second block allows my vendor JavaScript and CSS to be precompiled with the rest of my assets.
Then, I added the following line to app/assets/javascripts/application.js above //= require_tree .:
//= require_tree ../../../vendor/assets/javascripts/.
This will automatically add to my application all of the JavaScript files I put into vendor/assets/javascripts.
For the Sass, I added the following to app/assets/stylesheets/application.sass:
#import "../../../vendor/assets/stylesheets/*";
I added this line before #import "*"; so that my own application's styles will take preference. This will include all of the vendor Sass files in with my application. Then I renamed all of my vendor .css files to use the .scss extension.
Now that development is working fine, I was worried about precompilation. I ran rails assets:precompile locally, and sure enough, all of my vendor assets were included!
I'm trying to create a plugin which is suppose to expose a javascript file, but I can't get it to load in my rails 5 application.
In my gem, I've tried adding my javascript file called my_gem.js to
vendor/assets/javascripts
app/assets/javascripts
lib/<gem-name>/assets/javascripts
But none of them work. I just get this error message when loading the file in my application.js
couldn't find file 'my_gem' with type 'application/javascript'
This is how I load my plugin/gem in to my rails project
gem "my-gem", path: "~/projects/my-gem"
We've created a gem which utilizes assets before.
You'll want to create an app/assets/javascripts/my_gem folder in your gem directory tree, where you'll put your my_gem.js file.
Most importantly, you need to add this file to the asset path (we use an engine):
#lib/my_gem.rb
module MyGem
class Gem < Rails::Engine
config.assets.precompile += %w(my_gem/my_gem.js)
end
end
This will either allow the file to be used standalone, or as part of your app:
#app/assets/javascripts/application.js
//= require my_gem/my_gem
You must tell Rails to compile my_gem.js. You can do this in an initializer, application.rb, or environment file.
Rails.application.config.assets.precompile += ["my_gem.js"]
I'd recommend keeping the source file at ~/projects/my-gem/app/assets/javascripts/my_gem.js
In my project I have third party JavaScripts and Css files inside the vendor/assets/javascripts and vendor/assets/stylesheets directories. In development mode I can refer to the assets within those directories using the javascript_include_tag and stylesheet_include_tag methods.
However those scripts do not get precompiled when I run the rake assets:precompile command and subsequently can't be accessed in production.
Could someone please say why are assets inside the vendor directory get ignored by the rake task?
I was able to answer my own question.
This wasn't obvious to me but it does make sense. Except for the application.css and application.js file all other .js/.css files get ignored by the precompile rake task. Therefore as long as your scripts and stylesheets are referenced using //= require name_of_script convention inside the application.js/.css files they will get appended to the relavant file fine.
However if you don't want certain scripts to be placed inside the application.js/.css files, then you need to explicitly tell Rails that you still want them to be precompiled using this line inside the config/environment/production.rb or other relavant runtime environment config file:
# Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
config.assets.precompile += %w( morris.min.js raphael.min.js )
I want to separate out my javascripts into separate subdirectories in my Rails 3.1 app.
For instance I have a /modules directory inside /app/assets/javascripts
A way to either require all the contents of the directory or each file individually would be helpful.
Edit: To clarify, I want to do this from my application.js coffeescript file.
I believe the way to do this in Sprockets is
#= require_tree modules
or
#= require_tree ./modules
if you want to select a subdirectory relative to the CoffeeScript file, rather than relative to app/assets/javascripts (see this issue).
It looks like SASS by default exposes scss files which I find rather obnoxious. Is there a way to configure SASS to look for scss files in a folder that's not in the web root but compile them into the public/stylesheets folder?
Yes!
If you use Compass, then you'll have a file /config/compass.rb that'll look like the following. Here I have my sass files in app/stylesheets and saving compiled in tmp/stylesheets (to help with heroku deployments)
/config/compass.rb
# This configuration file works with both the Compass command line tool and within Rails.
# Require any additional compass plugins here.
project_type = :rails
project_path = Compass::AppIntegration::Rails.root
#project_path = RAILS_ROOT if defined?(RAILS_ROOT)
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "tmp/stylesheets"
sass_dir = "app/stylesheets"
environment = Compass::AppIntegration::Rails.env
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
Old question but it's actually simple to do, you just pass the directories through to sass instead of specific .scss like so;
sass --watch /location/to/you/scss/:/location/to/your/css
Then any changes to scss will be saved into your css directory and it will also follow the same structure of your scss directory.