Rails中Webpacker与Asset Pipeline共存问题及合并方案咨询

嘿，我来给你掰扯清楚这个问题——我在Rails项目里和webpacker、Asset Pipeline打过不少交道，太明白这种共存的困惑了！

没错，它们会生成两个完全独立的压缩文件，各自走自己的编译流程：

• Asset Pipeline（也就是Sprockets）负责处理app/assets/stylesheets下的所有样式文件，最终会把入口文件（比如application.css）编译压缩后输出到public/assets目录，你得通过stylesheet_link_tag 'application'在页面里引入它。
• Webpacker则会处理app/javascript/packs/frontend里关联的样式（比如你在frontend.js里import的.scss/.css文件），打包完成后输出到public/packs目录，一般文件名和你的pack文件对应（比如frontend.css），通过stylesheet_pack_tag 'frontend'引入。

默认情况下，你的页面会同时加载这两个独立的压缩样式文件。

当然可以！有两种主流方案，我更推荐第一种：

• 方案一：把所有样式迁移到Webpacker管理
  这是长期来看最省心的做法，能减少两套系统的维护成本。你可以把app/assets/stylesheets里的文件移到app/javascript下（比如新建app/javascript/styles目录），然后在你的frontend pack文件里统一导入这些样式：

  // app/javascript/packs/frontend.js
  import '../styles/application.scss'
  

  之后你就可以删掉页面里的stylesheet_link_tag 'application'，只用stylesheet_pack_tag 'frontend'就行，Webpacker会把所有样式打包成一个文件。

• 方案二：让Asset Pipeline引入Webpacker的输出
  这种方式比较绕，不太推荐。你可以配置Webpacker把样式输出到Asset Pipeline能识别的目录，然后在application.css里通过@import引入Webpacker生成的样式文件。但这样会失去Webpacker的模块化优势，还容易出问题。

如果两套系统都依赖Bootstrap这类库，默认情况确实会重复导入：

• Asset Pipeline通常是通过gem安装Bootstrap，然后在application.css里用@import 'bootstrap'引入；
• Webpacker则是通过npm安装Bootstrap，在pack文件里用import 'bootstrap/dist/css/bootstrap.css'引入。

这样页面里会加载两次Bootstrap的样式，不仅增加了文件体积，还可能因为重复的类名/样式规则导致奇怪的冲突。

这里有几个靠谱的解决办法：

• 统一依赖来源
  选其中一套系统来管理所有第三方样式依赖：

  • 如果你倾向用Webpacker：删掉Asset Pipeline里的Bootstrap gem，改用npm install bootstrap安装，然后在pack文件里统一导入，同时把业务样式也迁移到Webpacker目录。
  • 如果你坚持用Asset Pipeline：删掉Webpacker里的Bootstrap依赖，改用gem安装，或者把npm包的CSS文件复制到app/assets/stylesheets/vendor目录，通过Asset Pipeline引入。

• 彻底禁用其中一套系统的样式处理
  比如你决定全用Webpacker管理样式，可以在config/initializers/assets.rb里关掉Asset Pipeline：

  Rails.application.config.assets.enabled = false
  

  这样就从根源上避免了重复的可能。

• 确保Webpacker的extract_css配置开启
  Rails 6+默认是开启这个配置的，它会把Webpacker处理的所有样式提取到单独的CSS文件，结合迁移Asset Pipeline样式的方案，就能实现单文件输出+无重复依赖的效果。

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