Webpacker не может найти таблицы стилей / application.css

Question

Я использую Ruby on Rails с webpacker.

Настройка webpacker работает просто отлично, я уже установил jQuery, Bootstrap 4 и Font Awesome.

В данный момент мой каталог веб-упаковщиков выглядит так:

• app/javascript/packs/javascripts/application.js
• app/javascript/packs/stylesheets/application.scss
• app/javascript/packs/stylesheets/base.scss

В моем файле application.html.erb :

...
<%= javascript_pack_tag 'javascripts/application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'stylesheets/application' %>
...

В моем application.js файле:

import 'bootstrap/dist/js/bootstrap';

В моем файле application.scss :

$fa-font-path: '~font-awesome/fonts';
@import '~font-awesome/scss/font-awesome';
@import '~bootstrap/scss/bootstrap';
@import 'base';

В настоящее время я помещаю свой собственный CSS в файл base.scss , и он работает просто отлично.

Я хочу использовать шаблон Bootstrap 4, более конкретно этот шаблон PurpleAdmin . Он имеет собственный CSS, содержащий более 20 тысяч строк кода, которые вы можете увидеть здесь .

Всякий раз, когда я пытался скопировать и вставить коды CSS в мой base.scss , веб-упаковщик выдает ошибку Webpacker can't find stylesheets/application.css.

Но я пишу свой собственный CSS в base.scss , он прекрасно компилируется. Я также попытался поместить пользовательский CSS шаблона в звездочки (app/assets/stylesheets/base.scss), и он прекрасно работает.

Я также попытался импортировать CSS непосредственно в мой файл html.erb, например <link rel='stylesheet' href='http://www.bootstrapdash.com/demo/purple-admin-free/css/style.css'>, и тоже отлично работает.

Почему он не работает с помощью Webpacker? Как я хочу бросить, используя звездочки с этого момента.

Answer 1

Похоже, что ошибки происходят из строк 17254-17280 этого файла .

@font-face {
  font-family: 'ubuntu-light';
  src: url("../fonts/Ubuntu/Ubuntu-Light.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/Ubuntu/Ubuntu-Light.woff2") format("woff2"), url("../fonts/Ubuntu/Ubuntu-Light.woff") format("woff"), url("../fonts/Ubuntu/Ubuntu-Light.ttf") format("truetype");
}

@font-face {
  font-family: 'ubuntu-regular';
  src: url("../fonts/Ubuntu/Ubuntu-Regular.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/Ubuntu/Ubuntu-Regular.woff2") format("woff2"), url("../fonts/Ubuntu/Ubuntu-Regular.woff") format("woff"), url("../fonts/Ubuntu/Ubuntu-Regular.ttf") format("truetype");
}

@font-face {
  font-family: 'ubuntu-medium';
  src: url("../fonts/Ubuntu/Ubuntu-Medium.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/Ubuntu/Ubuntu-Medium.woff2") format("woff2"), url("../fonts/Ubuntu/Ubuntu-Medium.woff") format("woff"), url("../fonts/Ubuntu/Ubuntu-Medium.ttf") format("truetype");
}

@font-face {
  font-family: 'ubuntu-bold';
  src: url("../fonts/Ubuntu/Ubuntu-Bold.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/Ubuntu/Ubuntu-Bold.woff2") format("woff2"), url("../fonts/Ubuntu/Ubuntu-Bold.woff") format("woff"), url("../fonts/Ubuntu/Ubuntu-Bold.ttf") format("truetype");
}

Просто потому, что у меня нет этих файлов локально, и это вызывает ошибку. Удаление CSS с неверными источниками делает эту работу за меня.