在使用Webpacker应用程序的Rails中，已编译的样式似乎加载了ok（200），但未应用

Question

将现有的React项目从Rails 4升级到5.1，并使用新的Webpacker pack_tag系统加载资产。事情似乎正确编译，我有一个包文件packs/mutts.jsx，在我的index.html.erb中我引用

<%= javascript_pack_tag 'mutts' %> <%= stylesheet_pack_tag 'mutts' %>

当服务器运行时，这会导致4个文件被编译为app/public/packs/：.js，.js.map，.css和.css.map - 全部包含[packname] ] - [hash] .extension格式。

当我检查从pack_tag生成的html时，我可以看到它们每个链接到相应的js和css文件，文件名中包含正确的哈希值。在devtools中查看Network选项卡，两个文件都成功加载200。

但是当我查看Sources选项卡时，我看到localhost:3000有一个packs/目录只包含js文件，并且css无处可见，而且样式绝对不是应用于页面。

我是获取文件结构还是导入错误或其他内容？似乎不是webpack配置问题，因为编译文件的内容看起来是正确的。

Answer 1

问题出在javascript_pack_tag的位置。将它放入facebook之后就可以了。

应该已经抓住了这个 - Webpacker的大多数演示都将标记放在相关的Users::OmniauthCallbacksController右边，但在我的情况下，我每页都渲染一个新的JS根，所以js包是由一个不是根application.html.erb

的rails视图

我已经看到一些webpacker示例似乎是为了“让资产保持在相关代码附近”，但我很高兴在这里放弃全局样式。