sprockets 已停更且不支持现代 css 特性，webpacker 是 rails 6+ 官方推荐方案；二者互斥，迁移需彻底停用 sprockets 的 assets pipeline，否则 stylesheet_link_tag 会因路径错配而失效。
直接说结论：Sprockets 已停更、不支持现代 CSS 特性，Webpacker 是 Rails 6+ 官方推荐路径；但二者不能混用，迁移前必须明确停用 Sprockets 的 assets pipeline。
为什么 sprockets 的 stylesheet_link_tag 在 Webpacker 项目里会失效
Sprockets 和 Webpacker 是两套完全独立的资源编译系统，共享同一套 app/assets 目录但互不感知。一旦启用 Webpacker（如执行 rails webpacker:install），Rails 默认仍加载 Sprockets 中间件，但 Webpacker 不会自动接管 stylesheet_link_tag 所指向的 Sprockets 编译产物——除非你手动禁用 Sprockets 或重写视图 Helper。
- 常见错误现象：
stylesheet_link_tag 'application'返回空标签，或 404/assets/application.css - 根本原因：Webpacker 不生成
public/assets/下的传统 Sprockets 文件，而是输出到public/packs/，且只处理app/javascript/下通过import引入的样式 - 兼容性影响：Sprockets 的
require_tree、require_self等指令在 Webpacker 中完全无效
import 语句如何正确加载 Sass/SCSS 文件（Webpacker 场景）
Webpacker 默认支持 .scss、.sass、.css，但路径和写法必须匹配 Webpack 的 resolve 规则，不是简单复制 Sprockets 的目录结构就能跑通。
- 样式文件应放在
app/javascript/styles/或app/javascript/src/styles/下（而非app/assets/stylesheets/），否则 Webpack 可能找不到模块 - 入口文件（如
app/javascript/application.js）中必须显式import，例如：import '../styles/application.scss' - 若需复用原有
app/assets/stylesheets/，需在config/webpacker.yml中添加：resolved_paths: ['app/assets']，再用import 'stylesheets/application' - 注意：Sass 变量/混合（
@mixin）跨文件共享时，需用@use或@import（Sass 新语法），旧式@import已被弃用
stylesheet_pack_tag 和 stylesheet_link_tag 混用的风险
两者底层机制不同：stylesheet_link_tag 依赖 Sprockets 的 manifest.json 查找编译后 CSS；stylesheet_pack_tag 读取 Webpacker 生成的 public/packs/manifest.json 并插入对应 <link> 标签。同时存在会导致资源重复加载、CSS 优先级混乱、甚至 HMR（热更新）失效。
- 典型问题：页面出现双份
application.css，其中一份无内容或加载失败 - 检查方法：查看浏览器 Network 面板，确认请求路径是
/packs/xxx.css还是/assets/xxx.css - 必须清理的残留点：
app/views/layouts/application.html.erb中的stylesheet_link_tag、config/environments/production.rb中的config.assets.enabled = true（Webpacker 项目应设为false） - 开发期调试建议：临时在
config/webpacker.yml中设置check_yarn_integrity: false，避免因yarn.lock冲突导致样式不编译
真正麻烦的不是语法转换，而是样式作用域和全局污染的隐性冲突——比如 Bootstrap 的 .btn 类在 Sprockets 下是全局生效，在 Webpacker + CSS Modules 下默认局部化，不加 :global 声明就可能突然“消失”。这类问题不会报错，只会在 UI 上静默崩坏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
