Search code examples
ember-cli-rails

stylesheet_link_tag returns <base href="/"> instead of <link>


Bundler update for the entire application caused a very specific issue with the <link> being returned from <%= stylesheet_link_tag 'application', media: 'all'%>

Instead of returning the usual <link rel="stylesheet" href="assets/application.css"> , it now returns <base href="/">

If I edit the HTML to manually add the <link>, the css shows up correctly which indicates that there is no compiler issue. Also, some answers that fixed somewhat similar problems did not work with this specific issue including (but not limited) to the following solutions:

# Enable the asset pipeline
config.assets.enabled = true

# Fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = true

# Serve Static Assets. 
config.serve_static_files = true

Also, switching ENVs and clearing cache with rake tmp:cache:clear and rake assets:clean did not had any effect on the issue...

To make things weirder, the ember stylesheet and script are working as expected:

<%= include_ember_stylesheet_tags :frontend %>
<%= include_ember_script_tags :frontend %>

<link rel="stylesheet" href="assets/frontend.css">
<script src="assets/frontend.js"></script>

Issue is possibly related to one of this gems:

  1. Rails (4.2.5)
  2. Sprockets (3.5.2)

You can view the complete Gemfile.lock or the entire Source Code on Github.

Another possible root cause is a new route configuration where somehow mount_ember_app :frontend, to: "/" relates to the lack of <link> being returned and <base href="/"> being returned instead since both maps to "/". However, I could certainly be wrong about it...

This is all the information that I was able to gather since I could not see any useful information on the logs including the browser's output.


Solution

  • This problem showed up after several upgrades around, especially after mount_ember_app was created. The way to fix it is to have a similar structure to the following:

    Ember-Cli-Rails Initializer

    EmberCLI.configure do |config|
      config.app :frontend, build_timeout: 30
    end
    

    Routes.rb

    mount_ember_app :frontend, to: "/", controller: "application"
    

    App/views/application/index.html.erb

    <%= render_ember_app :frontend do |head| %>
      <% head.append do %>
    
        <%# Rails Asset Pipeline%>
    
        <%= stylesheet_link_tag 'application', media: 'all'%>
        <%= javascript_include_tag 'application' %>
    
        <%# Ember-cli-rails Pipeline - Frontend Stylesheet is not used.%>
    
        <%= include_ember_script_tags :frontend %>
        <% include_ember_stylesheet_tags :frontend %>
    
        <%# META Stuff %>
    
        <%= csrf_meta_tag %>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
      <% end %>
    <% end %>
    

    Frontend/App/index.html

    <!DOCTYPE html>
    <html>
      <head>
         <title>Frontend</title>
         {{content-for 'head'}}
         {{content-for 'head-footer'}}
      </head>
      <body>
         {{content-for 'body'}}
         {{content-for 'body-footer'}}
         <%= render partial: "layouts/shared/analytics" %>
      </body>
    </html>
    

    This will solve most, if not all assets issues. <base href="/"> apparently is normal as I now believe that it simply refers to the mount point for the Frontend.

    I also had issues with @mixins after most of the SCSS came back to life, but later I found out that they were tied to a totally different issue, and therefore will not be discussed in this answer.