带有 Webpacker 和 SCSS 的 Rails 6 不工作

Question

我有两个单独的问题（或者它们可能合并在一起而我错过了）。该应用正在使用引导样式，但现在不再这样做了。

问题 1

当我对application.js 进行任何更新时，无论它多么小（文件中任何地方的额外换行符）都会杀死导入的引导文件。

现在我无法让引导样式显示句点。

问题 2

当我将以下内容放入 application.html.erb 的 head 标记中时：

<!-- before -->
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<!-- after -->

它不向浏览器呈现输出：

<!-- before -->

<!-- after -->

我不确定这是 Webpacker 问题还是导致此问题的原因。如果需要任何其他详细信息，请告诉我。

我在这里有一个完整的 repo，你可以克隆/浏览使用 Docker 启动开发环境的说明。

您可以在这里查看：Funtime Github repo

Answer 1

Webpacker 未配置为提取任何 css。

1. 在webpacker.yml 中设置extract_css: true。将此设置为 true 将提取您在 /packs 下的 js 文件中导入的任何 css 以分隔 css 文件。在您的情况下，application.js 中导入的任何 css 都将在application.css 中可用。如果您有一个名为 test 的包，则 css 将被提取到 test.css。

2. 将application.scss 从packs 移出到/css（或stylesheets，随便你）

3. 像这样更新application.js：

import "./../css/application";
import Rails from "@rails/ujs";
....

4. 确保使用 bin/webpacker-dev-server 启动 webpacker 开发服务器。

如下所示：