Ruby on rails 在*Rails 6*应用程序的manifest.json中找不到Webpacker抛出application.css

目前，我们的应用程序使用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' 

@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';

Packs/stylesheets/application.scss

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' 

@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';

---

我认为您应该只使用一个点导入

'./stylesheets/application'

，因为样式表目录与application.js处于同一级别

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

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

如果您这样做了，您应该再次使用两个点

“../stylesheets/application”

并确保在

webpacker.yml

中配置webpacker以提取CSS：

extract_css: true

---

经过长期的斗争，我找到了解决办法。谢谢@ahmed kamal

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

即：application.scss和application.js只有最后一个才能进入网页输入路径配置

解决方案：

 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

---

这一切对我来说都很好

检查目录名，确保它们与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

根据，官方修订为：

在app/javascript/packs/application.css中创建一个空文件

$ touch rebloom/app/javascript/packs/application.css

在config/webpacker.yml中将所有环境从

extract\u css:false

更改为

extract\u css:true

$ ruby -pi -e "sub(/extract_css: false/, 'extract_css: true')" config/webpacker.yml

在config/webpacker.yml中将开发中的dev_服务器的hmr和inline更改为true（注意：假设您没有自定义设置，则以下命令可以工作。在这种情况下，请手动更新文件）

重要

如果您遵循了其他说明，请确保在config/webpacker.yml中没有将生产模式的compile更改为true 在生产模式下，这会对应用程序的性能产生负面影响，这是不必要的。您只需要使用

$ bundle exec rake assets:precompile

---

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

extract\u CSS:true

在

webpacker.yml

application.js和application.CSS中不是名称冲突，并且

cache\u manifest:true

不是修复的一部分。