执行cap deploy时遇SassC::SyntaxError：无法找到tailwindcss/base

问题描述 #

执行cap deploy部署项目时触发报错，capistrano.log日志显示SassC::SyntaxError，提示无法找到或读取tailwindcss/base。

capistrano.log日志 #

Done in 604ms.
warning ../../package.json: No license field
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
warning webpack-dev-server > webpack-dev-middleware > memfs@3.6.0: this will be v4
warning ../../package.json: No license field
rake aborted!
SassC::SyntaxError: Error: File to import not found or unreadable: tailwindcss/base.
        on line 5200:1 of stdin
>> @import 'tailwindcss/base';  

   ^
stdin:5200
/var/www/beachfireguy/shared/bundle/ruby/3.0.0/gems/sassc-2.4.0/lib/sassc/engine.rb:50:in `render'
/var/www/beachfireguy/shared/bundle/ruby/3.0.0/gems/sassc-rails-2.1.2/lib/sassc/rails/compressor.rb:29:in `call'
/var/www/beachfireguy/shared/bundle/ruby/3.0.0/gems/sprockets-4.2.0/lib/sprockets/sass_compressor.rb:30:in `call'
/var/www/beachfireguy/shared/bundle/ruby/3.0.0/gems/sprockets-4.2.0/lib/sprockets/processor_utils.rb:84:in `call_processor'
/var/www/beachfireguy/shared/bundle/ruby/3.0.0/gems/sprockets-4.2.0/lib/sprockets/processor_utils.rb:66:in `block in call_processors'
/var/www/beachfireguy/shared/bundle/ruby/3.0.0/gems/sprockets-4.2.0/lib/sprockets/processor_utils.rb:65:in `reverse_each'
/var/www/beachfireguy/shared/bundle/ruby/3.0.0/gems/sprockets-4.2.0/lib/sprockets/processor_utils.rb:65:in `call_processors'
/var/www/beachfireguy/shared/bundle/ruby/3.0.0/gems/sprockets-4.2.0/lib/sprockets/loader.rb:182:in `load_from_unloaded'
/var/www/beachfireguy/shared/bundle/ruby/3.0.0/gems/sprockets-1.2.2/lib/concurrent-ruby/concurrent/promise.rb:564:in `block in realize'
/var/www/beachfireguy/shared/bundle/ruby/3.0.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/executor/ruby_thread_pool_executor.rb:352:in `run_task'
/var/www/beachfireguy/shared/bundle/ruby/3.0.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/executor/ruby_thread_pool_executor.rb:343:in `block (3 levels) in create_worker'
/var/www/beachfireguy/shared/bundle/ruby/3.0.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/executor/ruby_thread_pool_executor.rb:334:in `loop'
/var/www/beachfireguy/shared/bundle/ruby/3.0.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/executor/ruby_thread_pool_executor.rb:334:in `block (2 levels) in create_worker'
/var/www/beachfireguy/shared/bundle/ruby/3.0.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/executor/ruby_thread_pool_executor.rb:333:in `catch'
/var/www/beachfireguy/shared/bundle/ruby/3.0.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/executor/ruby_thread_pool_executor.rb:333:in `block in create_worker'
Tasks: TOP => assets:precompile
(See full trace by running task with --trace)

相关配置文件 #

tailwind.config.js #

module.exports = {
  content: [ 
    './app/**/*.html',
    './app/**/*.erb',
    './app/**/*.js',
    './app/**/*.jsx',
    './app/**/*.ts',
    './app/**/*.tsx',
    './app/**/*.css',
    './app/**/*.scss',
    ],
  theme: {
    extend: {},
  },
  plugins: [],
}

application.tailwindcss #

@import 'tailwindcss/base'; 
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

排查解决方案 #

1. 确保部署环境安装前端依赖 #

• 检查Capistrano的deploy.rb配置，确认部署流程包含yarn install步骤，若未配置需添加：

  after 'deploy:updated', 'yarn:install'
  

• 登录服务器进入项目current目录，执行yarn install --production，确认node_modules/tailwindcss目录存在且完整。

2. 配置Sass加载路径 #

让Sass能识别node_modules目录，在config/initializers/assets.rb中添加：

Rails.application.config.assets.paths << Rails.root.join('node_modules')

或者在config/application.rb中配置：

config.sass.load_paths << Rails.root.join('node_modules')

3. 统一包管理器解决依赖冲突 #

日志提示同时存在package-lock.json和Yarn锁文件，删除package-lock.json统一使用Yarn：

rm package-lock.json
git add .
git commit -m "移除package-lock.json，统一使用Yarn管理依赖"

4. 验证导入路径 #

若上述配置后仍报错，尝试使用相对路径导入：

@import '../node_modules/tailwindcss/base';
@import '../node_modules/tailwindcss/components';
@import '../node_modules/tailwindcss/utilities';

也可将application.tailwindcss重命名为application.scss，确保Sass处理器正确识别文件类型。

5. 本地预编译验证 #

在本地执行RAILS_ENV=production rails assets:precompile，确认预编译能成功，排除本地配置问题后再重新部署。

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