Apple M1 Mac+Colima环境下Rails cssbundling-rails无法监听文件变更

在Apple M1 MacBook的Docker容器（通过Colima运行）中，cssbundling-rails仅在容器启动时编译SCSS文件，后续修改指定监听的SCSS文件不会触发重新编译。

详细信息 #

当前环境使用Foreman和Procfile管理cssbundling-rails与jsbundling-rails的监听进程，bin/dev在docker-compose文件中执行，其中JavaScript打包可正常监听并重新编译application.js。

Colima环境配置命令：

colima start --arch x86_64 --cpu 4 --memory 6 --disk
docker context use colima

已在Docker容器内成功执行命令：rails css:install:bootstrap

设备运行MacOS Monterey Version 12.6

package.json包含以下脚本：

"scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets",
    "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"
  }

修改/app/assets/stylesheets/application.bootstrap.scss文件后无重新编译动作，仅在销毁并重启容器时才会重新编译CSS，终端无报错信息。

容器重启后的输出如下：

$ sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules --watch
$ Sass is watching for changes. Press Ctrl-C to stop

Gemfile #

source "https://rubygems.org"

ruby "3.1.3"

# Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
gem "rails", "~> 7.0.4", ">= 7.0.4.3"

# The original asset pipeline for Rails
gem "sprockets-rails"

# Use sqlserver as the database for Active Record
gem "activerecord-sqlserver-adapter"

# Use the Puma web server
gem "puma", "~> 5.0"

# Use JavaScript with ESM import maps
#gem "importmap-rails"

gem "tiny_tds"

gem "jsbundling-rails"

# Build JSON APIs with ease
gem "jbuilder"

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem "tzinfo-data", platforms: %i[ mingw mswin x64_mingw jruby ]

# Reduces boot times through caching; required in config/boot.rb
gem "bootsnap", require: false

gem "cssbundling-rails"


group :development, :test do
  # 调试Rails应用
  gem "debug", platforms: %i[ mri mingw x64_mingw ]
  gem "rspec-rails"
  gem "factory_bot_rails"
  gem "faker"
end

group :development do
  # 异常页面控制台
  gem "web-console"

  # 性能徽章
  # gem "rack-mini-profiler"

  # 加速命令执行
  # gem "spring"
end

group :test do
  # 系统测试
  gem "capybara"
  gem "selenium-webdriver"
  gem "webdrivers"
end

解决方法 #

1. 强制Sass使用轮询模式监听文件 #

在M1 Mac的x86模拟容器中，文件系统事件传递可能存在兼容性问题，给Sass命令添加--poll参数，强制定期检查文件变化：
修改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 --watch --poll"

2. 检查Docker卷挂载配置 #

确保docker-compose.yml中宿主机目录挂载正确，使用delegated选项平衡同步及时性与性能：

services:
  web:
    volumes:
      - .:/app:delegated

避免使用只读或缓存挂载模式，确保容器能实时获取宿主机的文件变更。

3. 验证Procfile.dev配置 #

确认项目根目录的Procfile.dev中，CSS进程调用的是带--watch参数的脚本：

css: yarn build:css
js: yarn build --watch
web: bin/rails server -p 3000

重启bin/dev使配置生效。

4. 更新Sass到最新版本 #

旧版Sass可能存在容器环境下的监听bug，执行以下命令更新：

yarn add sass@latest

5. 调整Colima的文件共享模式 #

如果上述方法无效，尝试修改Colima的文件挂载协议，重启Colima时添加--mount-type 9p：

colima stop
colima start --arch x86_64 --cpu 4 --memory 6 --disk --mount-type 9p

9p协议对文件事件传递支持更好，适合解决跨架构容器的文件监听问题。

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