在现有rails项目上安装“`cssbundling rails”后参考现有的scss资产

Question

安装cssbundling-rails 创业板之后，我在引用位于app/assets/stylesheets/下的现有.scss文件时遇到困难。

安装cssbundling-rails创业板时，它：

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

然后，在应用程序布局中使用<%= stylesheet_link_tag ' application‘%>标记作为正常的结果。

复制：

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

我试过的几件事。

• 在assets/config/manifest.js中直接引用样式表
• 在application.tailwind.css中添加导入规则以引用现有的scss文件。
• 将css直接添加到application.tailwind.css文件。，这确实工作，和样式是正确应用的。我相信这不是我们想要的模式。

在何处以及如何引用退出的.scss在app/assets/stylesheets下用于新的捆绑/构建过程？

诚然，我认为这是因为不完全理解链轮、资产管道和捆绑/构建过程。我觉得我漏掉了一些显而易见的东西。

Answer 1

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

*= require posts是链轮指令。

所以这里发生的是：

安装css捆绑后，命令./bin/dev将根据您在本地Procfile.dev中设置的内容启动福尔曼进程。

默认情况下，这包括一个类似于css: yarn build:css --watch的行。

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

当您使用css-build设置使用顺风时，该纱线生成:css将运行tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css。

链轮指令= require posts将被纱线忽略。(它被视为css注释。)

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

直到现在，当您使用链轮时，当您启动您的rails服务器(您应该能够在您的浏览器中确认)时，这个指令才会被转换为实际的css。

Answer 2

现在，在application.tailwind.css中，我使用的标准要求包括这些样式。目前，在dev环境中，这是可以预期的。

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