javascript - Webpacker 找不到样式表/application.css

Question

我将 Ruby on Rails 与 webpacker 结合使用。

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 文件中，它工作得很好。

我想更具体地使用这个模板 PurpleAdmin 。它有一个超过 20K+ 行代码的自定义 CSS，您可能会看到 here .

每当我尝试在我的 base.scss 中复制和粘贴 CSS 代码时，webpacker 都会引发错误 Webpacker can't find stylesheets/application.css .

但我在 base.scss 中编写了自己的 CSS，它编译得很好。我还尝试将模板的自定义 CSS 放入链轮 ( app/assets/stylesheets/base.scss ) 中，效果很好。

我还尝试在我的 html.erb 文件中直接导入 CSS，例如 <link rel='stylesheet' href='http://www.bootstrapdash.com/demo/purple-admin-free/css/style.css'>而且也很好用。

为什么它不能使用 Webpacker？因为我想从现在开始不再使用链轮。

Answer 1

似乎错误来自 this file 的第 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 对我来说完成了这项工作。