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

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

Мой каталог webpacker в настоящее время выглядит так:

  • 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 000 строк кода, который вы можете увидеть здесь .

Всякий раз, когда я пытался скопировать и вставить коды CSS в свой base.scss , webpacker выдает ошибку 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? Так как с этого момента я хочу сбросить с помощью звездочек.

2
dcangulo 4 Ноя 2018 в 15:29

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 с недопустимыми источниками делает мою работу за меня.

0
dcangulo 4 Ноя 2018 в 12:49