stylesheet_link_tag with path, not only the file name

Question

I am adding some extra CSS/JS files into my vendor folder:

vendor/my_theme/css/app.css
vendor/my_theme/css/bundle.css
vendor/my_theme/js/app.js

They belong to an external theme I am integrating. I want to keep these assets separate from the assets of my app.

To import them in my template.html.erb, I have to add them in the manifest.js:

// app/assets/config/manifest.js
// Template
//= link_tree ../../../vendor/my_theme

Add the folders to the assets.rb:

# config/initializers/assets.rb
Rails.application.config.assets.paths << Rails.root.join("vendor/my_theme/css")
Rails.application.config.assets.paths << Rails.root.join("vendor/my_theme/js")

And now I can import them:

<!-- template.html.erb -->
<%= stylesheet_link_tag "bundle.css" %>
<%= stylesheet_link_tag "app.css" %>
<%= javascript_include_tag("app.js") %>

But it looks very fragile for me. There are chances, in the future, I'll create an app.css or an app.js, and then there will be a name conflict.

I am looking for how I can use a more extended path for the import helper tags. Like in here:

<%= stylesheet_link_tag "vendor/my_theme/css/app.css" %>
<%= stylesheet_link_tag "my_theme/css/app.css" %>

Nothing works

I have tried to change manifest.js:

//= link_tree ../../../vendor/my_theme .css .js // => error
//= link_directory ../../../vendor/my_theme/css .css
//= link_directory ../../../vendor/my_theme/js .js

Nothing work

Alex · Accepted Answer · 2024-08-01 21:07:09Z

1

This path is relative to one of Rails.application.config.assets.paths:

<%= stylesheet_link_tag "my_theme/css/app.css" %>

You need to have "my_theme/css/app.css" inside of an asset path:

# config/initializers/assets.rb

Rails.application.config.assets.paths << Rails.root.join("vendor/themes")

// app/assets/config/manifest.js

//= link_tree ../../../vendor/themes

Move my_theme into vendor/themes directory:

vendor/
└── themes/
    └── my_theme/
        ├── css/
        │   └── app.css
        └── js/
            └── app.js

answered Aug 1, 2024 at 21:07

Alex

31.3k10 gold badges69 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

fguillen Over a year ago

Yes, it works!. Note: Remember to restart the server

Collectives™ on Stack Overflow

stylesheet_link_tag with path, not only the file name

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related