在 Rails 中使用 Webpacker 应用程序，编译后的样式似乎加载正常 (200)，但未应用
In Rails with Webpacker app, compiled styles appear to load ok (200), but aren't applied
将现有的 React 项目从 Rails 4 升级到 5.1 并使用新的 Webpacker pack_tag 系统加载资产。事情似乎编译正确，我有一个包文件 packs/mutts.jsx 并且在我的 index.html.erb 中我引用
<%= javascript_pack_tag 'mutts' %>
<%= stylesheet_pack_tag 'mutts' %>
当服务器运行时，这会导致编译为 app/public/packs/ 的 4 个文件：一个 .js、.js.map、.css 和 .css.map - 都包含[packname]-[hash].extension format.
当我检查从 pack_tag 生成的 html 时，我可以看到它们每个 link 到相应的 js 和 css 文件，具有正确的散列在文件名中。并查看 devtools 中的网络选项卡，两个文件都成功加载了 200.
但是当我查看 Sources 选项卡时，我看到 localhost:3000 有一个 packs/ 目录，其中只包含 js 文件，而 css 无处可寻，并且样式绝对没有应用于页面。
我是不是得到了文件结构或导入错误还是什么？似乎不是 webpack 配置问题，因为编译文件的内容看起来是正确的。
问题出在我放置 stylesheet_pack_tag 的位置。将其放入 <head> 后，它起作用了。
应该已经抓住了这一点 - Webpacker 的大多数演示都将标签与相关 javascript_pack_tag 放在一起，但在我的例子中，我正在为每个页面呈现一个新的 JS 根目录，所以 js 包是由不是根 application.html.erb
的 rails 视图呈现
我看过一些似乎适用于 "keep assets in proximity of concerned code" 的 webpacker 示例，但我很高兴在这里只考虑全局样式。
将现有的 React 项目从 Rails 4 升级到 5.1 并使用新的 Webpacker pack_tag 系统加载资产。事情似乎编译正确，我有一个包文件 packs/mutts.jsx 并且在我的 index.html.erb 中我引用
<%= javascript_pack_tag 'mutts' %>
<%= stylesheet_pack_tag 'mutts' %>
当服务器运行时，这会导致编译为 app/public/packs/ 的 4 个文件：一个 .js、.js.map、.css 和 .css.map - 都包含[packname]-[hash].extension format.
当我检查从 pack_tag 生成的 html 时，我可以看到它们每个 link 到相应的 js 和 css 文件，具有正确的散列在文件名中。并查看 devtools 中的网络选项卡，两个文件都成功加载了 200.
但是当我查看 Sources 选项卡时，我看到 localhost:3000 有一个 packs/ 目录，其中只包含 js 文件，而 css 无处可寻，并且样式绝对没有应用于页面。
我是不是得到了文件结构或导入错误还是什么？似乎不是 webpack 配置问题，因为编译文件的内容看起来是正确的。
问题出在我放置 stylesheet_pack_tag 的位置。将其放入 <head> 后，它起作用了。
应该已经抓住了这一点 - Webpacker 的大多数演示都将标签与相关 javascript_pack_tag 放在一起，但在我的例子中，我正在为每个页面呈现一个新的 JS 根目录，所以 js 包是由不是根 application.html.erb
我看过一些似乎适用于 "keep assets in proximity of concerned code" 的 webpacker 示例，但我很高兴在这里只考虑全局样式。