ruby-on-rails Rails 7资产管道SassC::SyntaxError with Tailwind

cbwuti44  于 2023-10-21  发布在  Ruby
关注(0)|答案(5)|浏览(124)

我正在将一个新的Rails 7项目部署到生产环境中(在Heroku和Render.com上尝试),在构建过程中遇到以下错误:

$ tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css

       Done in 408ms.
       Done in 0.90s.
       rake aborted!
       SassC::SyntaxError: Error: Function rgb is missing argument $green.
               on line 428 of stdin
       >>   color: rgb(29 78 216 / var(--tw-text-opacity));

          ---------^
       stdin:428

这就是我 * 认为 * 是相关的部分,但如果有帮助的话,这里还有更多的输出上下文。

Preparing app for Rails asset pipeline
       Running: rake assets:precompile
       yarn install v1.22.17
       [1/4] Resolving packages...
       [2/4] Fetching packages...
       [3/4] Linking dependencies...
       [4/4] Building fresh packages...
       Done in 5.10s.
       yarn run v1.22.17
       $ esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds
       
         app/assets/builds/application.js      185.5kb
         app/assets/builds/application.js.map  301.0kb
       
       Done in 0.10s.
       yarn install v1.22.17
       [1/4] Resolving packages...
       success Already up-to-date.
       Done in 0.12s.
       yarn run v1.22.17
       $ tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css
       
       Done in 408ms.
       Done in 0.90s.
       rake aborted!
       SassC::SyntaxError: Error: Function rgb is missing argument $green.
               on line 428 of stdin
       >>   color: rgb(29 78 216 / var(--tw-text-opacity));
       
          ---------^
       stdin:428
       /tmp/build_d9d0bde2/vendor/bundle/ruby/3.0.0/gems/sassc-2.4.0/lib/sassc/engine.rb:50:in `render'
       /tmp/build_d9d0bde2/vendor/bundle/ruby/3.0.0/gems/sassc-rails-2.1.2/lib/sassc/rails/compressor.rb:29:in `call'
       /tmp/build_d9d0bde2/vendor/bundle/ruby/3.0.0/gems/sprockets-4.0.2/lib/sprockets/sass_compressor.rb:30:in `call'
       /tmp/build_d9d0bde2/vendor/bundle/ruby/3.0.0/gems/sprockets-4.0.2/lib/sprockets/processor_utils.rb:84:in `call_processor'

我使用rails new project_name -j esbuild --css tailwind创建了这个项目。开发模式工作正常,只是生产部署。
我真的不知道从哪里开始调试这个。

pkbketx9

pkbketx91#

防止sasssc-rails设置sass作为压缩机固定它给我。
将其添加到application.rb
config.assets.css_compressor = nil

ar7v8xwq

ar7v8xwq2#

来自rails tailwind自述文件
Tailwind使用现代CSS功能,这些功能不被默认包含在Rails 6的Gemfile中的sasssc-rails扩展所识别。为了避免任何类似SassC::SyntaxError的错误,您必须从Gemfile中删除该gem。
https://github.com/rails/tailwindcss-rails

xytpbqjk

xytpbqjk3#

与Vincent的答案类似,我把config.assets.css_compressor = nil放在config/environments/production.rb中。把它放在application.rb中不起作用。
我还安装了sassc-rails gem

fruv7luv

fruv7luv4#

Tomca32的答案解释了为什么我们会得到错误
然而,我需要做一些事情,因为我仍然需要处理Sass/Scss,不能只是删除sassc-rails gem,我需要替换它。
我正在运行cssbundling-rails和esbuild,以便使用Tailwind。
我的答案来自跑步:

bundle remove sassc-rails
rails css:install:sass

然后更新我的package.json以包括sass和tailwind命令。我通过将添加的sass命令和&&前置到现有的tailwind命令来做到这一点:

"scripts": {
    "build:css": "sass ... && tailwindcss ...",
    "build": "node ./esbuild.config.js"
  }

我还需要清理我的layout/application.html中从build命令添加的额外<%= stylesheet_link_tag "application" %>,然后我的错误就被清除了。

szqfcxe2

szqfcxe25#

选择的答案对我来说不是解决方案。使用dartsass-railsmanifest.js,其中包含以下内容:

//= link_directory ../stylesheets .css
//= link_tree ../builds

与builds目录中的application.*css产生冲突,可能在您的stylesheets
我不得不将所有的sass文件移动到它们自己的目录中来真正解决这个问题,并创建了一个app/assets/sass目录,然后必须这样做:

# config/initializers/dartsass.rb 
Rails.application.config.dartsass.builds = {
  "../sass/application.scss"                 => "application.css",
  # other files in ../sass
}

相关问题