Webpacker 抛出 application.css not found in manifest.json in *Rails 6* application答案

【问题标题】：Webpacker throws application.css not found in manifest.json in *Rails 6* applicationWebpacker 抛出 application.css not found in manifest.json in *Rails 6* application
【发布时间】：2020-02-18 17:26:38
【问题描述】：

目前我们的应用程序使用 Rails 6。它在生产中运行良好，但在开发模式下会引发一些错误。请帮助我。

这就是我的 application.js 和 application.css 的样子

packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")

import '../stylesheets/application'
import './bootstrap_custom.js'
import './side_menu.js.erb'
//import './sweetalert.js'
import './business_hours.js'
import './admin.js'
import './services.js'
import './user_service.js'

包/样式表/application.scss

@import './bootstrap_custom.scss';

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts'; 
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import './admin_dashboard.scss';
@import './side_menu.css';
@import './fonts.scss'; 
@import './login.css';

【问题讨论】：

标签： ruby-on-rails webpacker ruby-on-rails-6

【解决方案1】：

经过长期的努力，我找到了解决方案。谢谢@ahmed kamal。

具有相同名称但扩展名不同的多个包。

即： application.scss 和 application.js 只有最后一个才会进入 webpack 入口路径配置。

解决方案：

 1. Rename stylesheets/application.scss into stylesheets/style.scss
 2. Import style.scss in application.js like this import '../stylesheets/style'
 3. config/webpacker.yml make below changes
      compile: true
      cache_manifest: true
      extract_css: true

如果此解决方案不适合您，请尝试

rake assets:precompile

这对我来说一切正常

【讨论】：

application.js 和 application.css 不是名称冲突，cache_manifest: true 不是修复的一部分。

【解决方案2】：

我认为您应该只用一个点导入'./stylesheets/application'，因为样式表目录与您的 application.js 处于同一级别。

另外，我认为建议只在包目录中包含包，其余的将在它之前的一级，如下所示：

app/javascript
├── stylesheets
|   └── application.css
├── channels
└── packs
    └── application.js

如果你这样做了，你应该再次使用两个点'../stylesheets/application'

并确保将 webpacker 配置为在 webpacker.yml 中提取 CSS：

extract_css: true

【讨论】：

仍然面临同样的问题。请给我一些替代解决方案。
确保它重新编译了包，尝试重新启动你的开发服务器
是的，我重新启动了服务器。我在本地机器上也遇到了这个问题
你配置 webpacker 来提取 CSS 了吗？extract_css: true in webpacker.yml

【解决方案3】：

检查目录名称以确保它们不与 Webpacker 的输出冲突。就我而言，Rails 无法找到 application.css，即使 Webpacker 已成功编译它。

// Webpacker log output
Asset                         Size       Chunks       Chunk Names
application.js                3.62 MiB   application  [emitted]              application
css/application-631a168a.css  332 KiB    application  [emitted] [immutable]  application

我的相关目录结构：

app/javascript
|——packs
|  └——application.js
└——src
   └——assets
      |——css
      └——scss
         └——application.scss

在我的例子中，问题在于我已经有一个名为css的目录，所以当Rails去寻找编译后的css/application.css时，它去了这个目录而不是那个目录由 Webpacker 生成，无法找到 application.css。

删除冲突目录修复它：

$ rm -rf app/javascript/src/css // change path appropriately

【讨论】：

【解决方案4】：

根据recently commit in Rails，官方修复是：

在 app/javascript/packs/application.css 中创建一个空文件
```
$ touch rebloom/app/javascript/packs/application.css
```
在 config/webpacker.yml 中将所有环境从 extract_css: false 更改为 extract_css: true
```
$ ruby -pi -e "sub(/extract_css: false/, 'extract_css: true')" config/webpacker.yml
```
将 hmr 和 inline 更改为 true 用于 development 中的 dev_server config/webpacker.yml （注意：以下命令在您没有自定义设置的情况下工作。以防万一，请手动更新文件）
```
$ ruby -pi -e "sub(/hmr: false/, 'hmr: true')" config/webpacker.yml
$ ruby -pi -e "sub(/inline: false/, 'inline: true')" config/webpacker.yml`
```

重要

如果您按照其他说明进行操作，请确保您没有将 config/webpacker.yml 中生产模式的 compile 更改为 true 这会对您的应用程序在生产模式下的性能产生负面影响，并且没有必要。您只需要使用

预编译资产

$ bundle exec rake assets:precompile

【讨论】：