New Rails 7 app w/Bootstrap gives "Can't find stylesheet to import."

rubyonrails-talk
1

I’m creating a new Rails 7 (7.0.4) app with Bootstrap like this:

rails new mynewapp -c bootstrap

And I get this:

Error: Can't find stylesheet to import.
  ╷
1 │ @import 'bootstrap/scss/bootstrap';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  app/assets/stylesheets/application.bootstrap.scss 1:9  root stylesheet

Is there something obvious I’m missing here? Is this intended to work “out of the box”?

1 Like
2

Are you running with rails s? Try switching to ./bin/dev. If I’m not mistaking that option will install bootstrap in a way that requires a yarn process that watches and updates the files.

3

I’ve tried both options for running it with the same result.

Thing is that I get that message upon creation of the new app (as well as at runtime).

4

Check Ruby versions, Rails versions, node versions. Look at your Gemfile.

This is off the top of my head. But I just ran this (although I may have some .railsrc) and need to check further. But localhost puts up a page

5

Are you starting your dev server with rails s or bin/dev?

Walter

6

This should work out-of-the-box. I ran exactly the same command and could start my rails app locally.

I’m running Ruby 3.1.2.

Did you try: rails g newapp --css=bootstrap --javascript=esbuild

And you might check your YARN configuration as that’s the one responsible for fetching Bootstrap.

7

Yeah, I’ve tried:

rails new newapp --css=bootstrap --javascript=esbuild

I have also run using both:

rails s

and

./bin/dev

And get the same issue. NOTE: This error does not display on the default root page, but in any custom pages I create.

Here are the versions I am running:

  • Ruby 3.0.0
  • Rails 7.0.4
  • Node 16.15.1
  • Yarn 3.2.1

I should note that I am able to run the app (though this error message also shows in the browser).

I have a new MacBook coming this week. Perhaps I will have a pristine environment to try.

8

Can you share your .yarnrc.yml file? I had the same issue when using the Yarn Plug’n’Play feature (https://yarnpkg.com/features/pnp). I fixed the problem by going back to node-modules. Add nodeLinker: node-modules to your .yarnrc.yml file.

9

Have you tried yet

rails new quote-editor --css=sass
10

In my case, I had to install the appropriate requirements before running the rails new command.

It needs:

  • nodejs (apt install nodejs may install version 12 that is too old !)
  • npx
  • yarn

Here is a link to new rails app using Bootsrap and Postgresql: Constantin De La Roche / app-bootsrap · GitLab - look at the README.md that contains the instructions to generate your own new app.

11

I’ve had cases where I had to change that line to `@import ‘bootstrap/scss/bootstrap.scss’;