I am working on a Rails 5.2.3 application where I have application.js/.css as well as additional files organized into directories as follows:
In my layout I do this:
<%= javascript_include_tag "#{controller_path}/action_name" if File.exist?(Rails.root.join("app/assets/javascripts", controller_path, action_name, ".js") ) %>
I have hundreds of JS and CSS files organized under directories 3-4 levels deep.
After going through the webpacker literature I am still not sure how I am supposed to set it up for this particular use case - it appears entry points must go under app/javascripts/packs but I'm not sure how this webpacker thing can help me at all, am I supposed to go into each view and add individual links to its JS?
How do I get this done?
You can organize your files in the app/javascript folder either under packs or in your own folder structure.
You can then either import into app/javascript/packs/application.js and call it with the <%= javascript_pack_tag 'application" %>.
Or, if you have files in the packs folder you can require single files directly in the view with the same rails helper but the respective file name so e.g <%= javascript_pack_tag 'file_name" %>.
Related
For a Rails application I am making I want to be able to switch 'themes' using a configuration file. The theme does not need to switch dynamically (while running, but will be known when the application starts).
I moved my stylesheets directory out of my assets directory, to a folder called : /app/themes/[themename]/assets/stylesheets.
The idea is to have multiple folders in the /app/themes directory, which can be used by the application.
REMARK: I didn't move my javascripts folder from the assets folder, because I still want to use that globally.
In my layout I use the following code, to load controller specific stylesheets:
<%= stylesheet_link_tag "#{controller_name}" if MyApp::Application.assets.find_asset("#{controller_name}") %>
Of course, my application no longer knows where my assets are and it serves me a page, where the assets are not loading (because of the if check mentioned above).
I added the following code to my config/initializers/assets.rb to make sure it also loads the assets from the theme directory:
Dir.glob("#{Rails.root}/app/themes/#{Settings.site.theme}/assets/**/").each do |path|
Rails.application.config.assets.paths << path
end
Settings.site.theme is a string value which is filled correctly and now the stylesheets actually load on the website. So YAY!
But here is the thing, the minute I change the config.assets.compile to false, it all fails (so on test and production).
MyApp::Application.assets.find_asset("#{controller_name}") is throwing the exception undefined methodfind_asset' for nil:NilClass`.
I am on Rails 5.0.0.1.
Anyone got an idea how to fix this?
I think a simpler way would be to namespace the themes under the stylesheets. That is, have a folder structure like this:
- app
- assets
- stylesheets
- theme-blue
- application.scss
- theme-red
- application.scss
- javascripts
- application.js
And then, in your layout file, you just point the stylesheet_link_tag to theme-blue/application, like this:
<%= stylesheet_link_tag "theme-blue/application" %>
Another way to do this is have multiple layouts, one for theme-blue and another one for theme-red. In the controller, do
class BlueController < ApplicationController
layout "theme_blue"
end
And the file app/views/layouts/theme_blue.html.erb will require the right css file.
You might need to add the scss files to config/assets.rb, but Rails will tell you if you need that.
If I have Javascrips/CSS files from an ASP .NET Project and I want to put them in my Rails project. Where's the best place to put them? Do I need to change every url into <%= asset_path "img" %>?
Put it in assets folder and add below line in views:
To add CSS files:
<%= stylesheet_link_tag "test.css" %>
To add JavaScript files:
<%= javascript_include_tag 'test.js'%>
Building on #Unknown's answer:
Yes, you do need to use asset_path, or one of the sprocket helpers, to refer to your assets in your CSS file so that they will properly include the MD5 fingerprint. Plus, this way you get the right asset between development and production (since they don't live in public while in development). Here's the relevant guide: http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets
According to http://railsapps.github.io/rails-javascript-include-external.html
The best practise for DRY and speed (according to article above) is to download all files to your projects assets folders, put them in the assets pipe for each application.js/.css and let rails compile them into one application.js and application.css in production mode. There are several ways to do this in detail (see link) The preferred way according to article for speed and DRY-practise is to call all js and css from application.css/.js and not put stylesheet_link_tag, calling css or js from view-files. This even though you may have one specific user.js which you only want to use on users page. Though there are ways to load specific files into specific views (see article for details)
Ecxept from having to call them in once in head of application.html(.haml/.erb):
= stylesheet_link_tag "application", :media => "all"
= javascript_include_tag "application"
If you are calling files in css eg. an image, as long as you have the image in "assets/images" you only need to refer to the images as 'image.jpg' in your css/js-files.
Due to a specific setup, I would like to split the compiled stylesheets in two files. This is because (a part of) the CSS is needed for a Java application which can parse the CSS, but it is a bit buggy and can't handle some css-(hack)-syntax. Because I am unable to modify this Java application, I want to feed it only the CSS which it needs and of which I can make sure it is correct.
So, normally the assets pipeline would produce just one '/assets/application-[..].css' file. It would to let it also generate '/assets/custom-[..].css', based on a file selection I make. This still can be pre-compiled.
Is there a way to do this? Although I understand this is not the ideal setup..
To tell rails about additional files you wish to have precompiled, you can add them to the config.assets.precompile setting.
config.assets.precompile += ["other_application.css"]
You only see application.css in your HTML because that's the only file you're including
<%= stylesheet_link_tag "application" %>
If you have some custom.css.scss in your apps/assets/stylesheets directory, it will be compiled just like application.css.
For example, I might have
- _common.css.scss
- application.css.erb.scss
- other_application.css.erb.scss
in app/assets/stylesheets. In the top of the non-partial files I will put
#import "common";
to include _common.css.scss. I can now reference either stylesheet independent of one another in a layout.
<%= stylesheet_link_tag "application" %>
# or
<%= stylesheet_link_tag "other_application" %>
I'm playing around with Rails 3.2 and I have noticed that every time I generate a controller, Rails creates a js and css file having the same name in the assets folder.
I'm aware of the introduction of assets pipeline in Rails 3.1 but I'm not sure what code I'm supposed to insert in each of those files.
All the js and css specific for the actions included in the controller? Or how am I supposed to organize my assets?
For example, if you generate a ProjectsController, Rails will also add a new file at app/assets/javascripts/projects.js.coffee and another at app/assets/stylesheets/projects.css.scss. You should put any JavaScript or CSS unique to a controller inside their respective asset files, as these files can then be loaded just for these controllers with lines such as <%= javascript_include_tag params[:controller] %> or <%= stylesheet_link_tag params[:controller] %>. See asset_pipeline
How do I use CSS with RoR? When I link externally, I'm never able to see the files. I cp'd the .css file to every folder I could think of...views, controller, template, and nothing seems to work.
What do I need to do to enable external CSS files with a rails application? I'm new to rails, so forgive me if this is basic.
Put the CSS files in public/stylesheets and then use:
<%= stylesheet_link_tag "filename" %>
to link to the stylesheet in your layouts or erb files in your views.
Similarly you put images in public/images and javascript files in public/javascripts.
If you are using rails > 3 version, then there is a concept called asset pipeline. You could add your CSS to
app/assets/stylesheets
then it will automatically be picked up by the app. (this is useful as rails will automatically compress the CSS files)
read more here about the asset pipeline
Use the rails style sheet tag to link your main.css like this
<%= stylesheet_link_tag "main" %>
Go to
config/initializers/assets.rb
Once inside the assets.rb add the following code snippet just below the Rails.application.config.assets.version = '1.0'
Rails.application.config.assets.version = '1.0'
Rails.application.config.assets.precompile += %w( main.css )
Restart your server.
I did the following...
place your css file in the app/assets/stylesheets folder.
Add the stylesheet link <%= stylesheet_link_tag "filename" %> in your default layouts file (most likely application.html.erb)
I recommend this over using your public folder. You can also reference the stylesheet inline, such as in your index page.
The original post might have been true back in 2009, but now it is actually incorrect now, and no linking is even required for the stylesheet as I see mentioned in some of the other responses. Rails will now do this for you by default.
Place any new sheet .css (or other) in app/assets/stylesheets
Test your server with rails-root/scripts/rails server and you'll see the link is added by rails itself.
You can test this with a path in your browser like testserverpath:3000/assets/filename_to_test.css?body=1
To add to the above, the most obvious place to add stylesheet_link_tag is in your global application layout - application.html.erb.
With Rails 6.0.0, create your "stylesheet.css" stylesheet at app/assets/stylesheets.
Have you tried putting it in your public folder? Whenever I have images or the like that I need to reference externally, I put it all there.