Rails 7 资产管道 SassC::SyntaxError 与 Tailwind

Question

我正在努力将一个新的 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

 设置了该项目。开发模式工作正常，只需生产部署即可。

我不太确定从哪里开始调试。

Answer 1

防止 sassc-rails 设置 sass，因为压缩机为我修复了它。

将此添加到 application.rb

config.assets.css_compressor = nil

Answer 2

来自 Rails Tailwind 自述文件

Tailwind 使用了默认包含在 Gemfile for Rails 6 中的 sassc-rails 扩展无法识别的现代 CSS 功能。为了避免任何类似 SassC::SyntaxError 的错误，您必须从 Gemfile 中删除该 gem。

https://github.com/rails/tailwindcss-rails

Answer 3

与文森特的回答类似，我将

config.assets.css_compressor = nil

放入

config/environments/production.rb

中。把它放进去

application.rb

没有用。

我还安装了

sassc-rails

 gem

Answer 4

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"
  }

我还需要清理从构建命令添加的

<%= stylesheet_link_tag "application" %>

 中的额外 

layout/application.html

，然后我的错误就清除了。

Answer 5

所选答案对我来说不是解决方案。将

dartsass-rails

 与链轮一起使用，并使用 

manifest.js

 包含以下内容：

//= link_directory ../stylesheets .css
//= link_tree ../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
}

Answer 6

如果您想保持 SASS 压缩启用，您可以猴子补丁

Sprockets::SassCompressor

 来跳过 Tailwind css - 在初始化程序中设置以下内容：

# Required to stop Sprockets attempting to compress Tailwind CSS

require "sprockets/sass_compressor"

module SkipSassCompressionForTailwind
  TAILWIND_SEARCH = "! tailwindcss".freeze

  def call(input)
    if skip_compression?(input[:data])
      input[:data]
    else
      super
    end
  end

  def skip_compression?(body)
    body.include?(TAILWIND_SEARCH)
  end
end

Sprockets::SassCompressor.prepend SkipSassCompressionForTailwind