If bootstrap is added with cssbundling-rails, CSS imports break

[gonzric1]

I've created three different apps in last two days using css bundling, and can add external css with neither. It gives the same error whether I use rails new myapp --css bootstrap or run ./bin/rails css:install:bootstrap

I was able to reproduce the error on two other repos linked below, and on two separate machines.

Steps to reproduce: ruby "3.1.2" gem "rails", "~> 7.0.3", ">= 7.0.3.1"

• Either run rails new myapp --css bootstrap or do css:install:bootstrap after rails new runs.
• yarn add '@fortawesome/fontawesome-free
• add @import '@fortawesome/fontawesome-free' to ./app/assets/stylesheets/application.bootstrap.scss
• run rails assets:precompile or bin/dev or yarn build:css

get error:

$ sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules
Error: Can't find stylesheet to import.
  ╷
3 │ @import '@fortawesome/fontawesome-free'
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  app/assets/stylesheets/application.bootstrap.scss 3:9  root stylesheet

two repos with this setup at: https://github.com/gonzric1/css_test_1 https://github.com/gonzric1/css_test_2

I'm also using asdf to manage ruby, in case that is relevant?

[sarmad90]

I'm facing a similar issue. But I don't see an application.css in app/assets/stylesheets/. This is the error I'm seeing:

The asset "application.css" is not present in the asset pipeline.

[Petercopter]

@gonzric1 You are using Yarn 3, I would guess, because I'm seeing the same error while trying to migrate to Yarn 3 from Yarn 1. It seems like you can bypass the error by not using plug and play.

The weird thing is that I only see it in the CI, not locally. I've gone through the upgrade multiple times and I cannot figure out why I only see it in the CI.

This is a similar issue https://github.com/rails/cssbundling-rails/issues/92

[dhh]

You need to reference the full path to the css you're including. Looking at @fortawesome, I made it work with:

@import '@fortawesome/fontawesome-free/css/all'

The build:css step adds node_modules to the load path. You can see all the options with ls node_modules/@fortawesome/fontawesome-free/css/.