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’;

12

I have this issue and I think it’s because there’s no node_modules folder. I kind of would rather not give up on this and embrace plug’n’play. Does anyone know how to resolve this? I’m using yarn 4.1.0.

13

I think you faced this issue because you were using Yarn Modern.

Yarn Modern won’t create a node_modules folder and so the import statement (from node_modules) fails.

You probably instead have a .pnp.cjs file.

There is probably a clue to a preferred solution in this SO response (though I didn’t understand it /couldn’t get it to work). Instead you can try what @ Tomasz Pajor alluded to (noting this gives up on the benefits of Yarn PnP):

  1. Delete the pnp files
  2. Create a .yarnrc.yml file in the root directory
  3. add nodeLinker: node-modules to .yarnrc.yml
  4. run $yarn install (node_modules folder should appear)
  5. restart server

I just followed these steps for a new Rails 8 app:

  • $rails new myapp -c bootstrap
  • got the ‘can’t find stylesheet to import’ error.
  • I followed the steps above and bootstrap now works.
1 Like
14

Error: File to import not found or unreadable: bootstrap/scss/bootstrap. on line 2:1 of app/assets/stylesheets/application.scss

@import “bootstrap/scss/bootstrap”;

^ Extracted source (around line #50):

    line = Native.context_get_error_line(context)

    raise SyntaxError.new(message, filename: filename, line: line)
  end

  css = Native.context_get_output_string(context)

when i upgrade the rails from 7.0 to 7.2 then this issue raise how to solve this