Importmap option ignored on new Rails 7 project

Experimenting with Rails 7, but I’m little confused by something. I’m trying to start a project with importmap and sass.

rails new testproj

… uses the default of importmap (but without sass).

rails new testproj --css sass

… no longer uses the importmap default, and switches to esbuild.

rails new testproj --css sass --javascript importmap

… ignores the option flag and still uses esbuild.

rails new testproject
gem 'cssbundling-rails'
bundle install
rails css:install:sass

… appears to get me importmap and sass, but I’m confused why I’d have to go through all the extra steps. Is there some (good) reason that Rails is switching to esbuild in the previous examples?

SASS needs to have a Node (with package.json) setup to work. Your SCSS/SASS files need to be “compiled” during the development/deployment phase.

If you a have a closer look at the Procfile.dev you’ll see css: yarn build:css --watch and if you have a look at the package.jsonfile, you’ll see :

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

The magic is here. Ruby SASS/SASSc have been replaced by Dart-Sass.

See also: GitHub - rails/cssbundling-rails: Bundle and process CSS in Rails with Tailwind, PostCSS, and Sass via Node.js.

Thanks. I suppose what I’m confused by is this: does the sass requirement to be compiled (via the script ‘build:css’) mean that there is no way to accomplish the same thing via importmaps? Because that’s what it seems Rails is telling me by automatically switching to esbuild when I choose sass.

The SASS is compiled during the development/deployment with a watcher set in package.json.

We could imagine an architecture where the runtime JavaScript libraries are handled by importmap and some dev libraries used by the developer could be handled by node/npm/yarn/package.json.

Let me try to figure a solution for you.

Install dart-sass (Sass: Install Sass). If you are on a Mac, you can install dart-sass with homebrew (brew install sass/sass/sass). See: Sass: Install Sass

You will need to add the foreman gem manually and configure a Procfile_dev. In the Procfile_dev, you can call dart-sass with the --watch option.

For your JavaScript, you’ll use importmap.