在现有的Rails项目中安装`cssbundling-rails`后如何引用现有的scss资源？

Question

安装了cssbundling-railsgem后，我无法引用位于app/assets/stylesheets/下的现有.scss文件。

安装cssbundling-rails gem时:

1. 删除了包含所有引用（*= require_tree . *= require_self）以在资源管道中使用的application.css (https://github.com/rails/cssbundling-rails/blob/main/lib/install/install.rb#L13)。
2. 将其替换为application.tailwind.css（我运行了tailwind安装程序）
3. 创建一个名为builds的新文件夹，其中包含我使用的所有tailwind css的application.css。

然后在应用程序布局中像往常一样使用<%= stylesheet_link_tag 'application' %>标签。

要重现:

1. 创建一个新的Rails 6.1.4.1应用程序
2. rails g scaffold post
3. 在post.scss中添加一些样式并验证应用了样式
4. 安装cssbundling-rails
5. 安装tailwind选项
6. 使用./bin/dev重新启动服务器，您将看到未选择样式。

我尝试过的一些事情。

• 在assets/config/manifest.js中直接引用样式表
• 在application.tailwind.css中添加导入规则以引用现有的scss文件。
• 将CSS直接添加到application.tailwind.css文件中。这确实有效，并且样式被正确应用。我确定这不是预期的模式。

我在哪里以及如何引用位于app/assets/stylesheets下的现有.scss文件以在新的捆绑/构建过程中使用？

诚然，我认为这源于没有完全理解sprockets、资源管道和捆绑/构建过程。我觉得我在这里漏掉了一些显而易见的东西。

- computer_smile

Answer 1

对于 @computer_smile 的回答进行扩展。

* = require posts 是一种Sprockets指令。

这里发生的情况是:

当安装了css-bundling之后，命令./bin/dev将启动一个foreman进程，基于您在本地Procfile.dev中设置的内容。

默认情况下，其中包括类似css: yarn build:css --watch的行。

yarn build:css 命令设置在您的 package.json 文件中。

当您设置 css-bundling 以使用 tailwind 时，该 yarn build:css 将运行 tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css

Sprockets 指令 = require posts 将被 yarn 忽略。（它被视为 css 注释。）

此时，您可以检查您的构建（yarn 生成的），即 assets/builds/application.css 中是否有所有的 tailwind 样式，以及您的 Sprockets 指令（以 css 注释的形式） = require posts。

只有在使用 Sprockets 时，这个指令才会被转换为实际的 css，当您启动 Rails 服务器时，（您应该能够在浏览器中确认）。

- wnm

Answer 2

目前在application.tailwind.css中，我正在使用标准的require来包含这些样式。在开发环境中，这目前正常工作。

/*
 *= require posts
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
*/

- computer_smile