Rails 7中如何配置实现引用gem包内的Sass文件？

Rails 7 采用独立Sass编译器构建CSS时，默认不会自动将Ruby gem内的资产目录加入Sass加载搜索路径。旧版Rails依赖sass-rails自动注入gem资产路径的逻辑，在默认搭配dartsass-rails/cssbundling-rails的新构建链路中没有默认开启，因此编译器无法定位到gem内置的scss文件，抛出找不到样式表的报错。

• 首先确认govuk_publishing_components已正确写入Gemfile，执行bundle install完成gem安装，不要跳过这步基础操作。
• 根据你使用的CSS构建方案，添加Sass加载路径配置：
  • 如果你用官方默认的dartsass-rails作为Sass构建工具，新建或修改config/initializers/dartsass.rb初始化文件，写入以下配置：

    Rails.application.config.dartsass.build_options do |opts|
      govuk_gem_root = Gem.loaded_specs['govuk_publishing_components'].full_gem_path
      # 将gem内的样式目录加入Sass搜索路径
      opts << "--load-path=#{govuk_gem_root}/app/assets/stylesheets"
    end
    

  • 如果你用cssbundling-rails调用本地sass二进制构建CSS，直接修改package.json内的build:css脚本，追加对应load path参数：

    "build:css": "sass ./app/assets/stylesheets/application.sass.scss:./app/assets/builds/application.css --no-source-map --load-path=. --load-path=./node_modules --load-path=$(bundle show govuk_publishing_components)/app/assets/stylesheets"
    

• 确认主样式文件的导入语句顺序符合gem要求，示例如下：

  // app/assets/stylesheets/application.sass.scss
  @import "govuk_publishing_components/govuk_frontend_support";
  // 后续按需导入其他组件、编写自定义样式即可
  

• 重启Rails开发服务，重新执行yarn build:css即可正常完成编译。

• 不需要手动拉取gem源码、复制编译产物到本地项目目录，这类操作会导致后续gem升级时本地文件版本不同步，引入额外bug。
• 不需要额外引入sassc-rails等旧版Sass相关gem，Rails 7的dartsass是独立编译进程，无法读取旧gem注入的路径配置。
• 无论你使用Propshaft还是Sprockets作为资产管道，上述加载路径配置都可以生效，不需要额外调整资产管道的配置项。

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