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

Posted 2023-02-15

【中文标题】何时在 Rails 6 中使用 stylesheet_pack_tag 而不是 stylesheet_link_tag

【英文标题】：When to use stylesheet_pack_tag instead stylesheet_link_tag with Rails 6

【发布时间】：2020-06-13 18:05:16

【问题描述】：

当使用 Rails 6 创建一个新的 rails 项目时，它会创建一个带有 stylesheet_link_tag 的 application.html.erb 来为 javascript 文件加载 CSS 和 javascript_pack_tag。

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

使用 rails 6 和 webpacker 加载 css、图像的最佳做法是什么？

【参考方案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，但您的回答背后的原因是什么：pack_tag vs link_tag？

pack_tag 用于 Webpacker CSS。 link_tag 用于 Sprockets CSS。您可以选择一种方法或同时使用两种方法；它们是不同的捆绑器。

@rossta，您确实提到“您将在您的视图中使用 ，即样式表的名称与“包”的名称匹配。”但这里的“应用程序”是指 applicaition.js，没有 application.css 或 application.scss。那么我们只需要使用js文件来管理CSS吗？

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

我不知道必须启用extract_css...游戏改变者@rossta :praying_hands:

【参考方案2】：

只是想稍微澄清一下。这是基于我目前的理解，它似乎运作良好，但仍可能不完全准确。

资产管道处理的 CSS 获得 css_link_tag，通过 Webpacker javascript 包导入的 css 被 css_pack_tag 引用。

资产管道 css 位于 app/assets/stylesheets。 Webpack css 在app/javascripts/wherever_you_want.

所以在 webpack 中，所有导入到 javascript bundle 中的 css 最终都会被提取到一个 servable 文件中，该文件可以通过与 js bundle 相同的名称来引用。

所以如果在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 设置的影响。

这在development 中默认为假，在production 中为真。与此相关的一个大问题是，至少在我的情况下，css_pack_tag 在开发中实际上并不是“必需的”，因为删除它没有任何效果，因为它不是在本地提取的。它仍然“有效”，因为 css 是在 javascript 中加载的，并且似乎以某种方式应用。所以我删除了这些标签，认为在我的理解提高之前它们是不必要的。不幸的是，一段时间后，当我在 heroku 上部署到生产环境时，我的 css 都没有工作，我花了一段时间才弄清楚原因并记住我已经删除了这些 css_pack_tag 行。