Rails 7.0 application with bootstrap on development mode

Question

I have created a new rails app, after that I have installed bootstrap with cssbundling-rails,

I am now getting an error The asset "application.css" is not present in the asset pipeline. In order to have the application run I need to run the following script "scripts": { "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules" }, Only after that there is an application file created on assets/builds path. But I don't want to run this command every time I am updating the css files, I want the server to pick those updates without running the yarn script. How can I achieve that?

Answer 1

I recently ran into an issue similar to this and the source of the problem was in fact npm and yarn.

A properly configured application using cssbundling-rails should not need to run the command

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

to get the application to generate the build/application.css

npm known issue

Check your npm version, there is an issue if you are not using npm 7.1+ that basically prevents yarn from setting things up correctly.

Run npm -v and if necessary, upgrade npm with npm install -g npm@latest

If you had to upgrade npm, you will then need to close out your terminal and launch a new one, verify that the npm version is greater than 7.1.

After upgrading, re run rails css:install:bootstrap

And everything should be configured correctly.

Bundle Watcher

From the documentation for cssbundling-rails "You develop using this approach by running the bundler in watch mode in a terminal with yarn build:css --watch (and your Rails server in another, if you're not using something like puma-dev). You can also use ./bin/dev, which will start both the Rails server and the CSS build watcher (along with a JS build watcher, if you're also using jsbundling-rails)."

So, you can either run yarn build:css --watch from a separate terminal in your rails application or just use the ./bin/dev but either way should resolve the issue you are experience.