Rails 7 中惯用的 Sass 处理

Question

我对 Rails 7 中处理 Sass 的惯用方式感到困惑。

importmap-rails存储库的README.md说：

这使您不再需要 Webpack、Yarn、npm 或 JavaScript 工具链的任何其他部分。您所需要的只是 Rails 中已包含的资产管道。

和《Rails 资产管道指南：

Rails 可以通过将sassc-railsgem 添加到您的 中来轻松地与 Sass 一起工作Gemfile，Sprockets 使用它来Sass编译

但在 2020 年 10 月，我们得知LibSass 已被弃用，我们应该改用Dart Sass。

这 -rails gem 基于 LibSass。

因此我们应该使用其他东西来处理 Sass 吗？如果是这样，Rails 7 资产管道的文档是否具有误导性？

我对 Rails 比较陌生，对README.md的阅读也很幼稚和Asset Pipeline Guide的天真阅读让我认为我们应该使用“Rails 中已经包含的 asset pipeline”来编译 Sass，而不需要“Yarn， npm 或 JavaScript 工具链的任何其他部分”。

Rails 7 处理 Sass 的惯用方法是什么？

Answer 1

除了@dumbledad 粘贴的答案之外，请注意 Rails 7 中 JavaScript 和 CSS 之间存在严重脱节。虽然导入映射作为规范和概念理论上可以同时处理 ECMAScript 模块和 CSS 模块，但 Rails 7 只支持 ECMAScript 模块，而你对 CSS 却感到冷落。

TL;DR，如果您有任何包含 CSS 和 JS 组件的第三方组件，导入映射几乎毫无用处，除非您不介意通过两个不同部分中的两个不同的包管理系统手动版本维护相同的内容应用。如果您对双重维护开销感到满意，那么您可以保持轻量级并使用导入映射以及例如dartsass-rails。

请参阅https://github.com/rails/importmap-rails/issues/107上的官方回复获取后续评论 - 基本上，如果您要使用 JS 和 JS 的组件，请使用jsbundling-rails和进行完全基于 Node 的设置cssbundling-railsCSS 部分，除非您想单独对它们进行版本管理。

• 您将删除任何为您提供这些组件的 gem，例如删除 Bootstrap
• 相反，您可以通过package.jsonYarn管理此类依赖项
• 您将用于bin/dev运行开发服务器并进行 CSS 和 JS 编译

虽然与简单的 Gem + Sprockets 工作流程（非 Webpacker）或导入地图相比，这种更重的方法令人遗憾，而且它现在似乎有很大的缺点，例如@import不支持通配符，因此您现在必须手动维护列表以前只能作为树链接的文件 - 等等，与 Rails 4-5 左右时代的简单 Sprockets 和 gems 相比，有很多缺点，在开发中由单个服务器进程进行同步按需编译- 这确实意味着您可以访问更广泛的预处理、转译、通用 NPM / Yarn 生态系统或替代构建机制的选项，而且它现在以“香草”Yarn 为主导，package.json中间没有任何奇怪的宝石，使事情变得更难学习。

Answer 2

（直接复制自DHH对GitHub Issue的回复。）

在 Rails 中使用 Dart Sass 有两种方法。要么通过 cssbundling-rails 与 Node.js 一起使用。或者使用 https://github.com/rails/dartsass-rails，使用独立的 Dart Sass 编译器，不带节点。如果您正在创建使用导入映射的默认 Rails 7 应用程序，则应该执行后者。

我们需要更新资产管道指南和其他文档来认识到这一点。