Webpacker 找不到样式表/application.css

Question

我正在使用带有 webpacker 的 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，包含超过 20K+ 行代码，您可能会看到 here。

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

但我在 base.scss 中编写了自己的 CSS，它编译得很好。我还尝试将模板的自定义 CSS 放入 sprockets (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

错误似乎来自 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 对我来说是一项工作。