css - 我如何告诉 Rails 6 和 webpack 在布局上只使用特定的 css 和 js

Question

我正在做一个简单的 Rails 元素。

在 app->javascript->dashboard 下我有两个 js 文件:

• metisMenu.min.js
• startmin.js

我将它们包含在 app->javascript->packs 下的 application.js 文件中:

require("turbolinks").start()
require("@rails/activestorage")
require("channels")


require("dashboard/metisMenu.min")
require("dashboard/startmin")


import 'bootstrap'
import './stylesheets/application.scss'

对于我的 CSS 文件，我在 app->javascript->packs 下有一个样式表文件夹，其中还有这些:

• metisMenu.min.scss
• startmin.scss
• _custom.scss

我将它们包含在我的 application.scss 文件夹中的位置:

$$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~bootstrap/scss/bootstrap";
@import "metisMenu.min";
@import "startmin";

最后，我在 views->layouts 下有两个布局:

• dashboard.html.erb
• application.html.erb

现在我的问题是如何强制 rails 6 和 webpack 为特定布局仅使用特定的 CSS 和 JS 文件。例如在 dashboard.html.erb 下，我只想使用这些 JS 文件:

• metisMenu.min.js
• startmin.js

然后在我的 CSS 上我只想使用这些: - metisMenu.min.scss - startmin.scss

以及常规的 bootstrp 和 jQuery。我该怎么做？

Answer 1

使用不同的包装器。您在布局文件中决定使用哪个包:

ERB 应该是这样的:

<%= javascript_pack_tag 'application' %>

或者对于 HAML:

= javascript_pack_tag 'application'

因为它在布局文件中，您可以决定使用与标准 application.js 不同的文件。

一个好的方法是有一个共享的包文件(例如，与你的库)，然后一个与每个布局的 javascript:

<!-- dashboard.html.erb -->
<%= javascript_pack_tag 'libs' %>
<%= javascript_pack_tag 'dashboard' %>
<!-- application.html.erb -->
<%= javascript_pack_tag 'libs' %>
<%= javascript_pack_tag 'application' %>