使用Webpack在Rails 6视图中导入单个CSS文件的最佳方法

安德烈·克劳斯（AndréKraüss）

所以我已经用标签导入了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文件？

有更好的方法吗？

罗斯塔

是的，有可能。您无需创建单独的JS文件，只需为每个视图创建一个CSS“ pack”：

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

注意事项：

通常不建议每页使用多个“包”（例如“应用程序”和“主页”）（a）。Webpack无法知道您要在包之间共享代码，除非您添加了特殊配置（请参阅脚注）。上面我的答案假设您没有跨包复制导入（或者您可以复制）。
的WebPack仍然会创建一个JavaScript包，所以你仍然需要加载CSS包都javascript_pack_tag和stylesheet_pack_tag

一种。您可以使用splitChunksAPI（docs）跨包共享代码。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。