在Rails 6中何时使用stylesheet_pack_tag而不是stylesheet_link_tag？

Question

在使用Rails 6创建新项目时，它会创建一个application.html.erb文件，并使用stylesheet_link_tag来加载CSS和javascript_pack_tag来加载JavaScript文件。

现在，Rails 6还提供了stylesheet_pack_tag，那么我的问题是什么时候使用它？如果我们使用它，是否需要将所有CSS文件都添加到app/javascript文件夹中？

在Rails 6和Webpacker中加载CSS、图片的最佳实践是什么？

- Sanjay Prajapati

Answer 1

如果您在Webpack中导入了任何CSS文件并且已经在config/webpacker.yml中的任何环境中启用了extract_css: true，则应使用stylesheet_pack_tag。

给定以下目录结构：

app/
  javascript/
    packs/
      application.js
    styles/
      site.css

并且下面是在 application.js 文件中的代码：

import '../styles/site.css'

你可以在视图中使用 <%= stylesheet_pack_tag 'application' %>，即样式表的名称与“包”的名称相匹配。

此时，我建议将app/javascript 重命名为app/frontend。所以，在config/webpacker.yml中的关键更改为：

source_path: app/frontend
extract_css: true

app/
  frontend/
    packs/
      application.js
    styles/
      site.css

- rossta

---

谢谢@rossta，但是你的回答中pack_tag和link_tag的原因是什么？ - BenKoshy

pack_tag 用于 Webpacker CSS。link_tag 用于 Sprockets CSS。你可以选择其中一种方法或同时使用它们；它们是不同的模块打包器。 - rossta

没错。在Webpack中，CSS和图像是从JavaScript文件中导入的。您的Webpacker配置将确保它们以所需的格式输出。 - rossta

我不知道需要启用 extract_css......这太重要了 @rossta :praying_hands: - VegaStudios

我的天啊...我花了几个小时调试为什么我的.scss文件没有加载。谢谢@rossta！ - vkozyrev

Answer 2

为了更好地澄清这一点。这是基于我的当前理解，它似乎已经足够好用了，但仍然可能不完全准确。

通过资源管道处理的CSS使用css_link_tag进行引用，通过Webpacker JavaScript包导入的CSS则使用css_pack_tag进行引用。

资源管道中的CSS位于app/assets/stylesheets。Webpack中的CSS位于app/javascripts/wherever_you_want。

因此，在Webpack中，所有导入到JavaScript包中的CSS最终都会被提取到一个可供服务的文件中，该文件可以通过与js包相同的名称进行引用。

因此，如果在app/javascripts/application.js中有以下内容：

import 'app/javascripts/css/one.css'
import 'app/javascripts/css/two.css'
import 'app/javascripts/css/three.css'

这些将被引用为

css_pack_tag 'application'

这在我的部署日志中显示为：

Entrypoints:
  application (430 KiB)
      css/application-9d82d487.css
      js/application-9f45d7ff735a7a203f28.js

值得注意的是，正如上面提到的，此行为受“extract_css”设置的影响。在开发环境中，默认情况下可能是错误的，在生产环境中可能是正确的。但需要注意的一点是，在我的情况下，即使在开发环境中删除了“css_pack_tag”，也没有任何影响，因为它没有被本地提取。它仍然“工作”，因为CSS在JavaScript中加载，并以某种方式应用。所以在理解之前，我删除了这些标签，认为它们是不必要的。不幸的是，当我后来在Heroku上部署时，我的CSS都没有工作，花了我一段时间才弄清楚原因并记住我已经删除了这些“css_pack_tag”行。请注意保留HTML标签。

- pixelearth