Rails 7升级后Sprockets未更新application.css问题求助

补充疑问解答 #

./app/assets/builds/application.css是yarn的产物，看你package.json里的build:css脚本：

"build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"

这个命令通过yarn执行，将application.bootstrap.scss编译输出到application.css，属于yarn脚本的编译结果。

核心问题：修改application.scss后builds目录下的CSS不更新 #

问题出在编译入口不匹配！你修改的是application.scss，但build:css脚本指定的编译源文件是application.bootstrap.scss，两者是不同文件，所以修改前者不会影响后者的编译输出。

关于@import语句的疑问 #

这些@import语句不冗余，也不会被自动引入：

• Sprockets默认不会自动加载app/assets/stylesheets下的所有文件，除非你在文件中写require_tree .（这是Sprockets语法，而非Sass的@import）
• 你当前用的是Sass的@import，只有显式声明的文件才会被导入到当前scss文件中
• 不需要移除scss文件来切换内容，只要调整@import的语句，或者修改build:css脚本的入口文件为你正在编辑的application.scss即可

快速修复建议 #

1. 修改package.json里的build:css脚本，将入口改为你正在编辑的application.scss：

"build:css": "sass ./app/assets/stylesheets/application.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"

2. 重新执行yarn build:css，之后修改application.scss再执行编译，就能看到application.css同步更新
3. 开发环境下可以用yarn build:css --watch，监听文件变化自动重新编译

另外，你提到的Leaflet和Bootstrap样式问题，建议先解决编译入口的问题再排查——当前编译结果并非你修改的文件内容，此时排查样式冲突会有偏差。

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