在Rails 6中，使用Webpack在视图中导入单个CSS文件的最佳方法是什么？

Question

我已经用标签导入了application.scss文件。

<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

它很有效

然而，我想将我的 CSS 文件分离并在特定的视图中调用，比如在 home/index 视图中调用。

<%= javascript_pack_tag 'home/index', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'home/index', media: 'all', 'data-turbolinks-track': 'reload' %>

我已经通过创建一个单独的JS文件（例如home.js），并在其中导入我的home.scss来实现了这一点。

import '../../stylesheets/home/index'

我的问题是，这种方式正确吗？

我是否总是需要创建一个JS文件来导入我的CSS文件？

是否有更好的方法？

- André Kraüss

Answer 1

是的，这是可行的。您不需要创建单独的JS文件，只需为每个视图创建一个CSS“包”即可：

app/javascript
└── packs
    ├── application.js
    └── home.scss

在你看来：

<%= javascript_pack_tag 'home', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'home', media: 'all', 'data-turbolinks-track': 'reload' %>

演示应用程序，变更分支: https://github.com/rossta/rails6-webpacker-demo/compare/example/css-pack

注意事项:

1. 在Webpacker 5中，不建议在页面上使用多个“packs”（例如'application'和'home'）。Webpack无法知道您要共享哪些代码，除非您添加特殊的配置来执行此操作（请参见脚注）。上面的答案假定您没有跨包重复导入（或者您可以接受重复）。

2. Webpack仍将创建JavaScript捆绑包以加载您的CSS捆绑包，因此您仍需要同时使用javascript_pack_tag和stylesheet_pack_tag。

a. 您可以使用splitChunks API（Webpacker 5文档，在Webpacker 6中默认启用）来跨包共享代码。

- rossta

---

只是想补充一下 OP 的例子：你可以将 CSS 或 JS 单独分成包。在我的情况下，JS 文件对于所有用户都是唯一的，而不同的 CSS 文件用于管理视图和用户视图。 - Pedro Gabriel Lima

@rossta，提醒你一下，splitChunks API文档的链接已经失效。另外，我有一个问题：你认为即使使用Webpacker v6 的 <%= javascript_pack_tag 'calendar', 'map' %> 示例，仍然应该遵循“不要在同一页上加载多个pack”的建议吗？ - frostini

@frostini 链接已修复，谢谢。我的建议适用于Webpacker v5，但现在在最新的Webpacker v6发布候选版中，默认启用了splitChunks。理论上，开发人员不应该太关注多个包的问题。目前在Webpacker存储库中跟踪的一些限制/潜在问题仍需注意。 - rossta