Rails 6应用无法识别自定义CSS文件，应如何正确添加加载？

核心问题排查与修复步骤 #

首先你不需要单独引入custom.scss，你已经将其导入到application.scss中，只要保证application.scss正常加载即可，按以下步骤操作：

步骤1：修复application.scss的语法冲突 #

不要混用Sprockets的require指令和Sass的@import指令，二者极易出现样式加载异常，将app/assets/stylesheets/application.scss的内容替换为以下写法：

@import 'jquery-ui';
@import 'custom';
// 其余同目录下的scss文件如需引入，统一用@import语法逐个声明，不要使用require_tree

步骤2：清理冗余配置 #

• 删除app/assets/config/manifest.js中你新增的//= link custom.scss行
• 删除application.html.haml中你新增的= stylesheet_link_tag 'custom'行，不需要单独加载该文件

步骤3：验证资产配置 #

打开config/environments/development.rb，确认以下配置项的值正确：

# 开启开发环境资产实时编译
config.assets.compile = true
config.assets.debug = true
config.assets.digest = false

步骤4：清除缓存并重启服务 #

执行以下命令清理历史资产缓存：

rails assets:clobber
rails tmp:clear

完成后重启Rails服务器，刷新页面后打开浏览器开发者工具，查看网络请求中的application.css是否加载成功，以及文件内容是否包含你的自定义样式。 #

特殊情况排查 #

如果上述操作后样式仍不生效，说明你当前项目的样式是通过Webpacker（你安装的Tailwind默认走Webpacker引入）处理，而非Sprockets资产管道：

1. 查看application.html.haml中是否存在stylesheet_pack_tag 'application'代码，如果存在则证明样式由Webpacker管理
2. 将你的自定义样式文件移动到app/javascript/stylesheets/目录下
3. 在Webpacker的入口文件app/javascript/packs/application.js中引入自定义样式：

import '../stylesheets/custom.scss'

4. 重启Webpacker dev server和Rails服务器即可生效

内容的提问来源于stack exchange，提问作者user984621