javascript - Webpacker找不到stylesheets/application.css

我在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，该CSS包含超过2万行代码，您可能会看到here。

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

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

我还尝试将CS​​S直接导入到<link rel='stylesheet' href='http://www.bootstrapdash.com/demo/purple-admin-free/css/style.css'>这样的html.erb文件中，并且也可以正常工作。

为什么使用Webpacker无法使用？正如我现在想使用链轮一样。

最佳答案

看来错误来自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可以帮我完成这项工作。

关于javascript - Webpacker找不到stylesheets/application.css，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53140834/