何时使用 stylesheet_pack_tag 而不是 stylesheet_link_tag 和 Rails 6

Question

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

现在，rails6也提供了一个stylesheet_pack_tag，那么我的问题是，什么时候使用呢？如果我们使用它，是否需要在 app/javascript 文件夹中添加所有 CSS 个文件？

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

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' %>，即样式表的名称与 "pack".

的名称匹配

此时，我还建议将 app/javascript 重命名为 app/frontend 之类的名称。所以，config/webpacker.yml中的关键变化：

source_path: app/frontend
extract_css: true

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

Answer 2

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

资产管道处理的

CSS 得到一个 css_link_tag 和 css 通过 Webpacker javascript 导入的包被 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 设置的影响。

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

何时使用 stylesheet_pack_tag 而不是 stylesheet_link_tag 和 Rails 6

When to use stylesheet_pack_tag instead stylesheet_link_tag with Rails 6

ruby-on-rails

ruby-on-rails-6

webpacker