使用 webpack 在 rails 6 个视图中导入单个 css 文件的最佳方法

Question

所以我已经导入了带有标签

的application.scss

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

有效

但是我想分离我的 css 文件并在特定视图中调用它们，例如在 home/index 视图调用中

<%= javascript_pack_tag 'home/index', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'home/index', media: 'all', 'data-turbolinks-track': 'reload' %>

我实现了这个创建一个单独的 js 文件，例如 home.js 并在内部像这样导入我的 home.scss

import '../../stylesheets/home/index'

我的问题是，这是正确的方法吗？

我是否总是需要创建一个 js 文件来导入我的 css 文件？

有没有更好的方法？

Answer 1

是的，这是可能的。您不需要创建单独的 JS 文件，只需为每个视图创建一个 CSS “包”：

app/javascript
└── packs
    ├── application.js
    └── home.scss

在您看来：

<%= javascript_pack_tag 'home', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'home', media: 'all', 'data-turbolinks-track': 'reload' %>

演示应用程序，有变化的分支：https://github.com/rossta/rails6-webpacker-demo/compare/example/css-pack

注意事项：

在 Webpacker 5[=35= 中通常不推荐 (a) 每页使用多个“包”（例如 'application' 和 'home'） ]. Webpack 无法知道你想要在包之间共享代码，除非你添加特殊配置来这样做（见脚注）。我上面的回答假设您没有跨包重复导入（或者您可以接受重复）。

Webpack 仍会创建一个 JavaScript 包来加载您的 CSS 包，因此您仍然需要 javascript_pack_tag 和 stylesheet_pack_tag

一个。您可以使用 splitChunks API（Webpacker 5 docs，在 Webpacker 6 中默认启用）跨包共享代码。

使用 webpack 在 rails 6 个视图中导入单个 css 文件的最佳方法

Best way to import single css files in a rails 6 views using webpack

ruby-on-rails

webpack

ruby-on-rails-6

webpacker

react-rails