如何让 Rails 6 与 PureCSS 和 WebPacker 一起工作

Question

我正在尝试将使用 PureCSS 样式表的 Rails 5 应用程序升级到带有 Webpacker 的 Rails 6，除了蛮力方法之外，我无能为力。

我在application.html.erb 中有这些行

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

我不得不下载所有 PureCSS 并将文件放在app/assets/stylesheets

然后我必须将每个文件列为 application.js 中的导入，如图所示

    import "../../assets/stylesheets/base.css"
    import "../../assets/stylesheets/buttons.css"
    import "../../assets/stylesheets/buttons-core.css"
    import "../../assets/stylesheets/forms.css"
    import "../../assets/stylesheets/forms-r.css"`
    import "../../assets/stylesheets/menus-core.css"
    import "../../assets/stylesheets/menus-dropdown.css"
    import "../../assets/stylesheets/menus-horizontal.css"
    import "../../assets/stylesheets/menus-scrollable.css"
    import "../../assets/stylesheets/menus-skin.css"
    import "../../assets/stylesheets/tables.css"

我试图通过将导入移动到 app/assets/stylesheets/application.css 来整理它

...
 *= require_tree .
 *= require_self
 */

@import "base.css";
@import "buttons.css";
@import "buttons-core.css";
...

但是无论我尝试将application.css 导入或导入application.js 都不起作用

import "../../assets/stylesheets/application.css"

或

require("../../assets/stylesheets/application.css")

我真的希望 purecss-sass gem 继续工作，但我真的不明白为什么它不工作？

肯定有更好的方法吗？

Answer 1

这里有很多东西要解压，所以请多多包涵。

肯定有更好的方法吗？

不是真的。在 Webpack 中，您可以使用 webpack-import-glob-loader 以 glob 模式加载目录中的所有文件。在 Sprockets 中，require_tree 指令会拉取整个目录。用于已弃用的 Ruby SASS 编译器的旧 sass-rails gem 可以为 @import 使用 glob（但始终不鼓励使用它）。

但是，所有这些方法的问题在于它们无法控制加载顺序。由于 CSS 是一种语言，其中规则在声明的顺序中具有优先权，这将导致灾难。

如果您不想让application.js 过长，请将其拆分为单独的pure_css.js 文件并从那里导入子文件。你真的想get purecss from Yarn 而不是依赖“链轮资产宝石”。

Webpack 与 Sprockets

Rails 6 中的资产非常混乱，因为社区还没有真正找到一套最佳实践，而且文档也没有跟上。

According to David Heinemeier Hansson (DHH) Webpack 和 Sprockets 旨在与用于 JavaScript 的 Webpack 和 Sprockets 共存，提供图像、CSS 和 JavaScript “sprinkles”（无论是什么）。

虽然 Webpack 实际上可以做图像和 CSS，但它很尴尬（根据 DHH）。其他人并不喜欢使用两个不同的工具链来做大部分相同的事情。特别是因为 Sprockets 真的一直依赖社区来创建封装前端包的 gem，当我们都知道未来是 NPM/Yarn 时，真的谁愿意这样做？

见Why does Rails 6 include both Webpacker and Sprockets?

链轮指令

/*
*= require_tree .
*= require_self
*/

仅当文件由 Sprockets 处理时才会真正起作用。 require_tree . 将需要当前目录及其子文件中的所有文件。

但是，由于您是通过 Webpack 导入文件，因此不会通过 Sprockets 提取该文件，并且该注释只是一个普通的旧注释，完全没有任何作用。

如果你想使用 Sprockets 而不是 Webpack 的 css 你需要 sprockets-rails gem 并且你想使用：

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

如果 purecss-sass gem 的 gemspec 与 Rails 6 兼容，则使用 Sprockets 应该可以让您继续使用它。但是这种方法可能不太适合未来。

CSS @import

在 CSS 中，@import at-rule 可用于将样式表链接在一起。您需要将 @import 与 URL 一起使用，并且样式表通过单独的 HTTP 请求加载到客户端 - 这意味着出于性能原因通常应避免使用它。

@import "base.css"; 实际上不会工作，因为浏览器会尝试加载 http://example.com/base.css。

SASS @import

@import "base.css"; 看起来像你复制粘贴的 SASS。

在SASS @import 中告诉 SASS 编译器将其他文件中定义的规则、变量、mixin 和函数拉入当前文件。与等效的 CSS 不同，这是在服务器端完成的，不会导致额外的 HTTP 请求。 @import 一直都挺有问题的，is replaced by @use 在Dart SASS。

如果你想使用 SASS 并避免使用过时的 libsass 和 Ruby 编译器，你想 use Webpack instead 的 Sprockets。