5

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

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

包/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';

在此处输入图像描述

4

4 回答 4

5

After a long struggle I found a solution for this. Thanks @ahmed kamal.

Multiple packs with the same name but a different extension.

i.e: application.scss and application.js only the last one will make it to the webpack entry path configuration.

Solution:

 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

If this solution not working for you, try th

rake assets:precompile

Thats all its started working fine for me

于 2019-10-22T15:22:15.267 回答
3

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

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

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

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

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

extract_css: true
于 2019-10-22T15:04:08.890 回答
0

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

// 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的application.css.

删除冲突目录修复它：

$ rm -rf app/javascript/src/css // change path appropriately
于 2020-05-18T14:35:00.350 回答
0

根据最近 在 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. 在 config/webpacker.yml中将开发中的 dev_server的hmr和inline更改为true （注意：以下命令在假设您没有自定义设置的情况下有效。以防万一，请手动更新文件）

    $ 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
于 2020-06-07T01:20:37.573 回答