0

我正在尝试将使用 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宝石继续工作，但我真的不明白为什么它不工作？

肯定有更好的方法吗？

4

1 回答 1

1

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

肯定有更好的方法吗？

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

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

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

Webpack 与 Sprockets

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

根据 David Heinemeier Hansson (DHH)的说法，Webpack 和 Sprockets 旨在与用于 JavaScript 的 Webpack 和 Sprockets 提供图像、CSS 和 JavaScript “sprinkles”（不管是什么）共存。

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

请参阅为什么 Rails 6 包含 Webpacker 和 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' %>

如果 gemspec 与 Rails 6 兼容，则使用 Sprockets 应该允许您继续使用purecss-sassgem。但是，这种方法可能不太适合未来。

CSS @import

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

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

SASS @import

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

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

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

于 2021-01-25T15:30:00.340 回答