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 文件中，并且效果很好。

我想更具体地使用Bootstrap 4模板 PurpleAdmin 。它具有一个自定义CSS，该CSS包含超过2万行代码，您可能会看到 here 。

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

但是我在 base.scss 中编写了自己的CSS，它可以正常编译。我还尝试将模板的自定义CSS放入链轮（app/assets/stylesheets/base.scss）中，并且效果很好。

我还尝试将CSS直接导入到<link rel='stylesheet' href='http://www.bootstrapdash.com/demo/purple-admin-free/css/style.css'>之类的html.erb文件中，并且效果还不错。

为什么使用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可以帮我完成这项工作。

Webpacker找不到stylesheets / application.css

1 个答案: