时间戳

首页 > 解决方案 > 使用 webpack 在 rails 6 视图中导入单个 css 文件的最佳方法

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

问题描述

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

有更好的方法吗？

标签： ruby-on-railswebpackruby-on-rails-6webpackerreact-rails

解决方案

是的，这是可能的。您不需要创建单独的 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

注意事项：

  1. 在 Webpacker 5 中通常不建议 (a) 每个页面使用多个“包”（例如“应用程序”和“主页”）。Webpack 无法知道您想要在包之间共享代码，除非您添加特殊配置来这样做（见脚注）。我上面的回答假设您没有跨包复制导入（或者您可以复制）。

  2. Webpack 仍然会创建一个 JavaScript 包来加载你的 CSS 包，所以你仍然需要javascript_pack_tag两者stylesheet_pack_tag

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

推荐阅读