使用Rails 7.1创建含Bootstrap项目时Dart Sass报错求助

我尝试通过标准流程升级Rails应用以使用Bootstrap，先测试Rails 7.1的默认项目创建流程，但执行命令rails new . --css bootstrap时失败，报错信息如下：

insert    config/initializers/assets.rb
  Appending Bootstrap JavaScript import to default entry point
      append    app/javascript/application.js
  Add build:css:compile script
         run    npm pkg set scripts.build:css:compile="sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules" from "."
         run    yarn build:css:compile from "."
yarn run v1.22.19
$ sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules
/Users/XXX/rails-new-test/node_modules/sass/sass.dart.js:116832
    if (ua.indexOf("DumpRenderTree") >= 0) return hooks;

我的环境版本：

ruby 3.2.1 (2023-02-08 revision 31819e82c8) [x86_64-darwin21]
Rails 7.1.1
Node v21.0.0
Yarn 1.22.19

解决方法 #

这个报错是Node 21（开发版）与旧版本dart-sass的兼容性问题导致的，可通过以下两种方式解决：

• 降级Node到LTS版本：Node 21为奇数号开发版本，兼容性不如LTS版本稳定，建议切换到Node 20.x LTS版本，重新执行项目创建命令即可。
• 升级sass版本：
  1. 打开项目根目录下的package.json文件，找到sass依赖项，将版本更新为^1.69.5及以上的稳定版
  2. 执行yarn install重新安装依赖
  3. 运行yarn build:css:compile完成CSS编译，之后继续项目初始化流程

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