Importmap option ignored on new Rails 7 project

1

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?

2

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.

3

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.

4

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.

5

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.

6

I’m experiencing the same issue, for example if I create a new project with

rails new -j importmap my_project_name

it is created using importmap, so that I have importmap executable inside the bin folder and I also have the importmap.rb.

But if I use

rails new -c bulma -j importmap my_project_name

I miss all the importmap files and dependencies setup.

I’ve already read @ycrepeau responses but I didn’t understand how they fix or explain this issue. Is this a deliberate feature or a bug?

7

-c bulma is incompatible with -j importmap.

Bulma uses SASS to compile scss files and create a compiled .css. This is done each time you save a file and when you deploy the application.

The incompatibility comes from the SASS implementation. The SASS compiler is found in the node_module directory. That means that you should find a file named package.json with SASS and Bulma listed.

You are now using esbuild as javascript handler.

In the Procfile you should see:

web: bin/rails server -p 3000
js: yarn build --watch
css: yarn build:css --watch

When you type bin/dev, you launch THREE (3) processes: your rails project, esbuild watcher and SASS watcher.

It is possible to have both importmap and SCSS in the same project BUT it is a very tedious hack currently not implemented.

The only CSS framework compatible with importmap is Tailwinds.

1 Like
8

thanks so much! I’ve now understood the issue and the possible solutions

1 Like