如何获得 Rails 6 使用 PureCSS 和 WebPacker

Question

我正在尝试使用 Webpacker 将一个使用 PureCSS 样式表的 Rails 5 应用程序升级到 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.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 指令拉取整个目录。旧的 sass-rails gem 用于已折旧的 Ruby SASS 编译器可以为 @import 使用 glob（但始终不鼓励使用它）。

然而，所有这些方法的问题在于它们无法让您控制加载顺序。由于 CSS 是一种规则在声明顺序中具有优先级的语言，因此这是灾难的根源。

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

Webpack 与 Sprockets

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

According to David Heinemeier Hansson (DHH) Webpack 和 Sprockets 旨在与用于 JavaScript 和 Sprockets 传送图像的 Webpack 共存，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 提取，并且该评论只是一个普通的旧评论，完全没有任何作用。

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

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

如果 gem 规格与 Rails 6 兼容，使用 Sprockets 应该可以让您继续使用 purecss-sass gem。然而，这种方法可能不太适合未来使用证明。

CSS @import

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

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

SASS @import

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

在SASS @import tells the SASS compiler to pull the rules, variables, mixins and functions defined in the other file into the current file. Unlike the CSS equivalent this is done server side and will not cause additional HTTP requests. @import has always been quite problematic and is replaced by @use in Dart SASS.

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

如何获得 Rails 6 使用 PureCSS 和 WebPacker

How to get Rails 6 working with PureCSS and WebPacker

ruby-on-rails

webpack

pure-css

肯定有更好的方法吗？

Webpack 与 Sprockets

链轮指令

CSS @import

SASS @import