How to use SCSS @import with current jquery-ui-rails gem version

Question

jquery-ui-rails-5.0.5, sass-rails-5.0.3

jquery-ui-rails-5.0+ changed the naming convention for its assets. Instead of jquery.ui.(whatever), it is now jquery-ui/(whatever). The Stylesheets are named (whatever).css. This causes the highly-recommended SASS @import option to fail, while CSS require continues to work.

I have been working on this problem this morning and I tracked down an answer in SASS-RAILS that was said to work, but didn't. It was to include both core and theme with the desired module as follows:

@import 'jquery-ui/core';
@import 'jquery-ui/datepicker';
@import 'jquery-ui/theme';

I wanted to post the answer that I discovered here, in case it helps.

Answer 1

This works if you also include the file extension:

@import 'jquery-ui/core.css';
@import 'jquery-ui/datepicker.css';
@import 'jquery-ui/theme.css';

Update: I pushed this to Heroku and it did not work there. After some debugging, I determined that I needed to rename them to *.scss, or *.scss.erb in theme's case, before Heroku would process them. I copied them to my own assets to do this.