Webpacker 在 /app/public/packs/manifest.json 中找不到 application.css

Posted 2023-02-16

【中文标题】Webpacker 在 /app/public/packs/manifest.json 中找不到 application.css

【英文标题】：Webpacker can't find application.css in /app/public/packs/manifest.json

【发布时间】：2021-04-27 17:30:40

【问题描述】：

我在我的 rails 应用程序上遇到了 webpacker 的问题。 /app/public/packs/manifest.json 中的 manifest.json 文件中似乎缺少 application.css。

我认为我的 manifest.json 不准确，我不知道如何让 rails 生成新的

在我看来代码

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

错误

app_1       | ActionView::Template::Error (Webpacker can't find application.css in /app/public/packs/manifest.json. Possible causes:
app_1       | 1. You want to set webpacker.yml value of compile to true for your environment
app_1       |    unless you are using the `webpack -w` or the webpack-dev-server.
app_1       | 2. webpack has not yet re-run to reflect updates.
app_1       | 3. You have misconfigured Webpacker's config/webpacker.yml file.
app_1       | 4. Your webpack configuration is not creating a manifest.
app_1       | Your manifest contains:
app_1       | 
app_1       |   "application.js": "/packs/js/application-c09a7a4ae38ea14ff8e2.js",
app_1       |   "application.js.map": "/packs/js/application-c09a7a4ae38ea14ff8e2.js.map",
app_1       |   "entrypoints": 
app_1       |     "application": 
app_1       |       "js": [
app_1       |         "/packs/js/application-c09a7a4ae38ea14ff8e2.js"
app_1       |       ],
app_1       |       "js.map": [
app_1       |         "/packs/js/application-c09a7a4ae38ea14ff8e2.js.map"
app_1       |       ]
app_1       |     
app_1       |   ,
app_1       |   "media/fonts/bold-affa96571d-v2.woff": "/packs/media/fonts/bold-affa96571d-v2-b092ddd6.woff",
app_1       |   "media/fonts/bold-b542beb274-v2.woff2": "/packs/media/fonts/bold-b542beb274-v2-616e5f21.woff2",
app_1       |   "media/fonts/light-94a07e06a1-v2.woff2": "/packs/media/fonts/light-94a07e06a1-v2-bb962e0c.woff2",
app_1       |   "media/fonts/light-f591b13f7d-v2.woff": "/packs/media/fonts/light-f591b13f7d-v2-f03d82c2.woff",
app_1       |   "media/images/favicon.ico": "/packs/media/images/favicon-b5bada83.ico",

我的应用程序的内容

【参考方案1】：

我的 Rails 6.1.1 应用在 production 环境中抛出了这个错误：

ActionView::Template::Error (Webpacker can't find bootstrap.css in /webapp/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:

  "application.js": "/packs/js/application-26b24ac7b08f8a1b640f.js",
  "application.js.map": "/packs/js/application-26b24ac7b08f8a1b640f.js.map",
  "entrypoints": 
    "application": 
      "js": [
        "/packs/js/application-26b24ac7b08f8a1b640f.js"
      ],
      "js.map": [
        "/packs/js/application-26b24ac7b08f8a1b640f.js.map"
      ]
    ,
  
):

设置

包含以下文件和内容：

app/javascript/packs/application.js

// rails generated stuff
import "styles/application.scss"

app/javascript/styles/application.scss

// some scss rules
body  background-color: red; 

app/views/layouts/application.html.erb：

<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %> <%# remove %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

解决方案

删除 app/views/layouts/application.html.erb 中的 stylesheet_pack_tag 完全有效。 javascript_pack_tag 指令加载 scss/css。

---

另请参阅：Webpacker 4.2 can't find application in /app/public/packs/manifest.json heroku

【讨论】：

现在它只是说“Webpacker 找不到 application.js”，但我的资产中有 application.js

【参考方案2】：

我在主布局中的生产配置application.html.erb，在我解释之前它可以节省你的生产

    <%= stylesheet_packs_with_chunks_tag 'application', media: 'all' %>
    <%= javascript_packs_with_chunks_tag 'application', 'important_entry_if_existed' %>

假设

所以，让我假设您现在首先将应用程序部署到生产环境中

您已添加 UI 库，例如 antd、material ui、... 您将 something.css 导入到一个条目中，例如 application.js 你已经优化了 webpacker，在 environment.js 和 environment.splitChunks() 您有信心，因为在长期运行的开发环境中一切都运行良好

您的代码库骨架是这样的，就像您之前阅读 the official webpacker guide 时一样

app/javascript:
  ├── packs:
  │   # only webpack entry files here
  │   └── application.js
  │   └── application.css
  └── src:
  │   └── my_component.js
  └── stylesheets:
  │   └── my_styles.css
  └── images:
      └── logo.svg

但是你得到的是 Webpacker 在 /app/public/packs/manifest.json 中找不到 application.css

我们称之为入口点

Here

需要注意的是只有webpack入口文件应该放在app/javascript/packs目录下； Webpack 会为每个入口点创建一个单独的依赖图，所以大量的包会增加编译开销。您的资产源代码的其余部分应位于此目录之外，尽管 Webpacker 不会对如何构建源代码进行任何限制或提出任何建议

所以对于上面的骨架，有两个入口点，第一个是application.js，第二个是application.css。用stylesheet_pack_tag 调用或替换stylesheet_link_tag 让我们感觉很完整，因为所有入口点都包含在webpack 处理它们的过程中

  <%= stylesheet_pack_tag application %>
  <%= javascript_pack_tag application %>

在开发中，它显然可以运行。但是在生产中，它使application.css 丢失。很可能，当您检查pack/manifest.json 时，您会看到一些奇怪的文件default~app~application。 答案，简而言之，默认webpacker.yml 配置为extract_css: false 用于生产。

我们应该知道的主要入口点和关键css

恕我直言，入口点可以加载 css、scss 等，但这样做会导致提取的 css 与入口点的命名冲突。如果application.js 中有导入或css 定义，那么命名冲突将创建奇怪的文件default~app~application。这些文件不能与编译源一起使用，因为我们没有为它们调用stylesheet_pack_tag。这是不受欢迎的行为。

所以这应该是正确的方式

app/javascript:
  ├── packs:
  │   # only webpack entry files here
  │   └── application.js
  └── src:
  │   └── my_component.js
  └── stylesheets:
  │   └── critical.scss # <-- rename from application.css
  │   └── my_styles.css
  └── images:
      └── logo.svg

// critical.css

@import 'my_styles'

// application.js

import '../stylesheets/critical'

然后我们将application.js作为主要入口点，提取的application.css必须包含critical.scss才能被识别。那么

  <%= stylesheet_pack_tag application %>
  <%= javascript_pack_tag application %>

或许很神奇，但一点也不令人困惑。此外，critical.scss 有助于加载异步/延迟 CSS 以防止 FOUC，但这不是问题。

splitChunk 导致 css 部分加载

通过 splitChunk 优化，webpack/webpacker 仍然可以将 css 提取到供应商/运行时文件，即使在生产中使用 extract_css: false。所以我还是建议用_xpack_with_chunks_tag 替换x_pack_tag。

祝你好运！

【参考方案3】：

如果您为 webpacker 正确设置了设置，但您仍然面临问题。这可能是由于在 localhost:3000 以外的不同页面上杀死并重新启动服务器。

如果我们在重启服务器时访问 localhost:3000。它工作正常。