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.
… ignores the option flag and still uses esbuild.
rails new testproject
… 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 :
"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.
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.
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
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?
-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.
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.
thanks so much! I’ve now understood the issue and the possible solutions