stylesheet_link_tag returns <base href="/"> 而不是 <link>

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

整个应用程序的捆绑程序更新导致了一个非常具体的问题,即从 <%= stylesheet_link_tag 'application', media: 'all'%>

返回 <link>

而不是返回通常的 <link rel="stylesheet" href="assets/application.css"> ,现在 returns <base href="/">

如果我编辑 HTML 以手动添加 <link>,css 会正确显示,这表明没有编译器问题。此外,一些解决类似问题的答案不适用于此特定问题,包括(但不限于)以下解决方案:

# 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

此外,使用 rake tmp:cache:clearrake assets:clean 切换 ENV 并清除缓存没有任何对问题的影响...

更奇怪的是,ember 样式表和脚本按预期工作:

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

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

问题可能与以下宝石之一有关:

  1. Rails (4.2.5)
  2. 链轮 (3.5.2)

您可以在 Github 上查看完整的 Gemfile.lock or the entire Source Code

另一个可能的根本原因是新的路由配置,其中 mount_ember_app :frontend, to: "/" 与未返回 <link> 相关,而是返回 <base href="/">,因为两者都映射到“/”。但是,我肯定是错的...

这是我能够收集到的所有信息,因为我在日志中看不到任何有用的信息,包括浏览器的输出。

这个问题是在多次升级后出现的,尤其是在创建了mount_ember_app之后。修复它的方法是具有与以下类似的结构:

Ember-Cli-Rails 初始化器

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>

这将解决大部分(如果不是全部)资产问题。 <base href="/"> 显然是正常的,因为我现在认为它只是指前端的挂载点。

在大部分 SCSS 恢复生机后,我也遇到了@mixins 的问题,但后来我发现它们与一个完全不同的问题有关,因此不会在这个答案中讨论。