在现有的 rails 项目上安装 `cssbundling-rails` 后引用现有的 scss 资产答案

【问题标题】：Reference existing scss assets after installing `cssbundling-rails` on existing rails project在现有的 rails 项目上安装 `cssbundling-rails` 后引用现有的 scss 资产
【发布时间】：2021-11-11 22:28:51
【问题描述】：

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

当您安装 cssbundling-rails gem 时：

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

3 的结果然后在应用程序布局中正常使用标记。

复制：

创建一个新的 rails Rails 6.1.4.1 应用程序
rails g scaffold post
在post.scss 中添加一些样式并验证样式是否已应用
安装cssbundling-rails
安装顺风选项
使用./bin/dev重启服务器，你会看到样式没有被拾取。

我尝试了几件事。

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

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

诚然，我认为这源于对 sprocket、资产管道和捆绑/构建流程的不完全了解。我觉得我在这里遗漏了一些明显的东西。

【问题讨论】：

标签： ruby-on-rails asset-pipeline ruby-on-rails-6 sprockets

【解决方案1】：

目前在application.tailwind.css 中，我使用标准要求来包含这些样式。这目前在开发环境中按预期工作。

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

【讨论】：

【解决方案2】：

只是为了扩展@computer_smile 的答案。

*= require posts 是 Sprockets directive。

所以这里发生的是：

安装css-bundling 后，命令./bin/dev 将根据您在本地Procfile.dev 中设置的内容启动foreman 进程。

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

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

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

Sprockets 指令= require posts 将被纱线忽略。（它被视为 CSS 注释。）

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

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

【讨论】：