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

Question

当前，我们在应用程序中使用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';

Answer 1

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

另外，我认为建议仅在pack目录中包含pack，其余的将在其之前一层，例如：

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

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

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

extract_css: true

Answer 2

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

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

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

我已经在此处的博客中解释了我的情况 -Rails 6 - Webpacker

解决方案：

 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

那对我来说一切正常了

Answer 3

检查目录名称，以确保它们与Webpacker的输出没有冲突。就我而言，即使Webpacker成功编译了if __name__=="__main__": df=pd.read_excel("abhi.xlsx") #print(df) today = datetime.datetime.now().strftime("%d-%m") yearNow = datetime.datetime.now().strftime("%Y") #print(type(today)) writeInd =[] for index, item in df.iterrows(): print(index,item['Birthday']) pr_bday = item['Birthday'].strftime("%d-%m") print(pr_bday) ，Rails也无法找到它。

application.css

我相关的目录结构：

// 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 的目录，所以当Rails去寻找已编译的css时，它就转到了该目录而不是由Webpacker生成的，并且找不到css/application.css。

删除有冲突的目录将其修复：

application.css

Answer 4

根据recently commit in Rails，官方修正为：

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

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

2. 在config / webpacker.yml中将所有环境从extract_css: false更改为extract_css: true

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

3. 将开发中的 dev_server 的 hmr 和 inline 更改为 true config / webpacker.yml中的em>（注意：以下命令在您没有自定义设置的情况下起作用。以防万一，请手动更新文件）

   $ 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