Rails 5.2.1集成Vue.js Webpacker遇public.css找不到错误求解决

我之前在Rails 5.2.x搭配Webpacker集成Vue的时候也碰到过几乎一模一样的问题，结合你的描述（Vue内嵌样式正常但Webpacker提示找不到public.css），可以从这几个方向排查修复：

• 检查项目中是否错误引入了public.css
  先全局搜索你的项目代码，重点看app/views/layouts/application.html.erb这类模板文件，有没有使用stylesheet_pack_tag 'public'这样的标签。Webpacker会根据这个标签去manifest.json里查找对应的打包文件，如果你的项目里根本没有生成public.css的逻辑（比如没有在app/javascript/packs/下创建对应的入口文件并引入css），自然会报错。

  • 如果这个标签是多余的，直接删掉即可；
  • 如果确实需要公共css文件，就在app/javascript/packs/目录下新建public.js，并在里面引入你需要的css资源（比如import '../styles/public.css'），重新打包后就会生成对应的public.css。

• 核对Webpacker的CSS提取配置
  打开config/webpacker.yml，查看不同环境下的extract_css配置：

  • 在development环境下，默认extract_css是false，Webpacker会把css打包进js文件里，不会单独生成.css文件。如果这时候你硬要通过stylesheet_pack_tag引用提取后的css，肯定找不到；
  • 在production环境下，extract_css默认是true，这时候要确保你的pack入口文件里确实有引入css资源，否则Webpacker不会生成对应的.css文件。

• 清理缓存并重新打包
  缓存不一致是这类问题的常见诱因，执行以下命令彻底清理并重新打包：

  bin/rails webpacker:clean
  bin/rails webpacker:compile
  bin/rails assets:clean
  

  执行完后重启Rails服务器，再访问页面试试。

• 区分Asset Pipeline和Webpacker的资源引用方式
  Rails 5.2中Asset Pipeline（app/assets目录）和Webpacker（app/javascript目录）是并行工作的，别搞混了引用方式：

  • 放在app/assets/stylesheets/下的css文件，要用stylesheet_link_tag 'public'引用；
  • 通过Webpacker打包的css，才用stylesheet_pack_tag 'public'引用。

• 确认Vue组件的样式配置（可选）
  虽然你说内嵌样式正常，但可以快速核对下：Vue组件的scoped样式是否正常生效，或者有没有在pack入口文件（比如application.js）里全局引入过css文件。这些配置会影响Webpacker是否生成对应的css打包文件。

我当时碰到这个问题，是不小心在布局模板里多写了一个stylesheet_pack_tag 'public'，删掉之后就完全正常了，你可以先从这个方向排查。

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