Webpacker выбрасывает application.css, не найденный в manifest.json в * Rails 6 * приложении

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.

Плюс, я думаю, что рекомендуется включать только пакеты в каталог пакетов, а остальные будут на один уровень раньше, как это:

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

, и если вы сделали это, вы должны снова использовать две точки '../stylesheets/application'

и убедиться, что вы настроили веб-упаковщикчтобы извлечь CSS, в webpacker.yml:

extract_css: true

Answer 2

После долгой борьбы я нашел решение для этого. Спасибо @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

Вот и все у меня все заработало