Can't import gem vendored Sass stylesheets

[sedubois]

When following the sass-rails to cssbundling-rails upgrade instructions (step 2 of the guide), the default build:css script fails for (legacy) imports of stylesheets embedded within Ruby gems (within their vendor/assets/stylesheets), e.g. @import "foundation/functions";. There is an error Error: Can't find stylesheet to import.

How can gem vendored Sass stylesheets be made available to the sass CLI?

[KDGundermann]

I have also used a small gem flag-icons-rails with Rails 4 which provides the country flags as images and a few scss styles for them.

It is implemented as a rails::Engine and adds the paths to assets:path:

module FlagIconsRails
  module Rails
    class Engine < ::Rails::Engine
      initializer 'flag-icons-rails.assets.precompile' do |app|
        %w[stylesheets images].each do |sub|
          app.config.assets.paths << root.join('app', 'assets', sub).to_s
        end
      end
    end
  end
end

adding @import "flag-icon" to app/assets/stylesheets/application.bootstrap.scss give only the error: Can't find stylesheet to import when running rake assets:precompile

As far as I understand rake assets:precompile calls yarn sass which is a Javascript node module, thus has nothing to do with rails or Rails:Engine. ?!?

( BTW the RailsGuides does not mention yarn at all )

So how can I include SASS stylesheets and images from a gem in Rails 7 ?

[Adrian-Hirt]

Using normal CSS files from gems with url seems to work, e.g. @import url(foo/bar.css), where you can basically place anything in the url helper that rake assets:reveal outputs (at least when using Propshaft).
The file is put trough the compiler of propshaft, and the file will be updated with the digest in its path, e.g. url("/assets/foo/bar-48af5572e05314eee7ab2f264966821632ea3913.css");.

However this only works for vendored CSS, as this will just trigger another GET request from the browser to fetch the other stylesheet, which then is applied by the browser. Using this for SASS is not possible, as the browser can't use SASS.

I tried changing the Propshaft::Compilers::CssAssetUrls class, such that SASS assets are inlined instead of imported by URL, however the compile step of propshaft is called after the yarn build:css step, i.e. it's operating on compiled CSS and as such this did not work.

Adding each gem to the load path isn't really that useful, is there really no other way to use the vendored SASS files?

[MrNagoo]

I have a node_module referencing another modules sass file and sass won't compile because it cant find file. (yes the package is there. no I can't edit the third party import.

@import 'node_modules/scut/dist/scut'

here's the cli line

"build:css": "sass ./app/assets/stylesheets/application.sass.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules

[mices]

Using normal CSS files from gems with url seems to work, e.g. @import url(foo/bar.css), where you can basically place anything in the url helper that rake assets:reveal outputs (at least when using Propshaft). The file is put trough the compiler of propshaft, and the file will be updated with the digest in its path, e.g. url("/assets/foo/bar-48af5572e05314eee7ab2f264966821632ea3913.css");.

However this only works for vendored CSS, as this will just trigger another GET request from the browser to fetch the other stylesheet, which then is applied by the browser. Using this for SASS is not possible, as the browser can't use SASS.

I tried changing the Propshaft::Compilers::CssAssetUrls class, such that SASS assets are inlined instead of imported by URL, however the compile step of propshaft is called after the yarn build:css step, i.e. it's operating on compiled CSS and as such this did not work.

Adding each gem to the load path isn't really that useful, is there really no other way to use the vendored SASS files?

I found that there's no such thing as "rake assets:reveal"

[jnsntm]

I have a node_module referencing another modules sass file and sass won't compile because it cant find file. (yes the package is there. no I can't edit the third party import.

@import 'node_modules/scut/dist/scut'

here's the cli line

"build:css": "sass ./app/assets/stylesheets/application.sass.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules

We have the same issue. Any updates on this?

[MrNagoo]

I have a node_module referencing another modules sass file and sass won't compile because it cant find file. (yes the package is there. no I can't edit the third party import.
@import 'node_modules/scut/dist/scut'
here's the cli line
"build:css": "sass ./app/assets/stylesheets/application.sass.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules

We have the same issue. Any updates on this?

I ended up switching to dartsass-rails and not use cssbundling-rails. dartsass:build has no issues.

[agirlnamedsophia]

@MrNagoo I was using dartsass-rails but couldn't get my image_urls to work in my scss files. I tried to move to cssbundling-rails but it's been a nightmare and I can't get any of my variable imports (previously working with @use "config"; for example) to work. How do you do image urls with dartsass-rails?

[adeherdt-r7]

any update on this?
We're trying to migrate to propshaft with cssbundling-rails, but not being able to include our vendored sources is a major blocker.

[ian-cameron]

I ran into this issue today and found this thread. As I am coming to understand, I think it won't be able to work because the bundler is node based and doesn't know about ruby gems. All it can do is access what is put under assets/build. So, for a gem's files to get included in that you need to write some ruby to copy any of the gem's assets into the build folder, maybe in an initializer. Then you'd just have to @import or @use it into your entry point file.

[brendon]

Sounds about right. It at least warrants a comment from the developers. It's a messy landscape to navigate at the moment. I'm on the point of retreat to Sprockets land again... :)

[louiswdavis]

For anyone still trying to make this work, I managed it by adding to my existing CLI code

"build:css": sass ./app/assets/stylesheets/application.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules

the extra option of

 --load-path=$(bundle show the_gem_name)/app/assets/stylesheets

and importing the scss file as normal in my application.scss

@import 'gem_scss_stylesheet';