Can't find stylesheet to import. @import '~bootstrap/scss/bootstrap';

[alucard001]

Hi

While I am following: Laravel PHP Framework Tutorial - Full Course for Beginners (2019), when I am running npm run dev during development, I got the following:

ERROR in ./resources/sass/app.scss (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./node_modules/resolve-url-loader??ref--5-4!./node_modules/sass-loader/dist/cjs.js??ref--5-5!./resources/sass/app.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

@import '~bootstrap/scss/bootstrap';
       ^
      Can't find stylesheet to import.
  ╷
8 │ @import '~bootstrap/scss/bootstrap';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  stdin 8:9  root stylesheet
      in /var/www/laravel/resources/sass/app.scss (line 8, column 9)
 @ ./resources/sass/app.scss 2:14-253

But my app.scss is following exactly your code here.

I am not very sure what I am doing it wrong.

I have tried run npm install again but there is no new install there.

Can you please help?

Thank you very much.

[devshark]

I bumped into the same problem, and installing bootstrap manually fixed this.
$ npm install bootstrap
After I got this part working, a UI issue opened up - the dropdown menu for Name -> Logout doesn't respond. Looks like a javascript issue, but no errors show up in the console.

[devshark]

I tried again and succeeded. After installing bootstrap and jquery via npm, you have to require it in your app.js:

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');
require('bootstrap/js/src/index');

window.Vue = require('vue');

[alucard001]

To people who got this problem: the default package.json coming from Laravel DID NOT contain the following packages, at least, I did not find below in my package.json.

bootstrap
false
jquery
vue

So you may want to compare your package.json to this repo and see if there are any different.

Hope it helps someone.

[MishanCool]

First use
$ npm install bootstrap
command. then
@import "../node_modules/bootstrap/scss/bootstrap";
in your styles.scss file. My error fixed from doing this for angular.

[vipertecpro]

npm install bootstrap-sass

[adam1920]

1. Remove node_modules:
   $ rm -R node_modules

2. Install again:
   $ yarn install

All should work now

[tohqecom]

npm install bootstrap-sass
Thanks @vipertecpro
that is a good solution!
If you use 'yarn', let do this: yarn add bootstrap-sass

[najathi]

I faced this issue. Remove this symbol. ~

// Bootstrap
@import "bootstrap/scss/bootstrap";

[karlkovaciny]

I got this issue when I imported the file with @import '~bootstrap/scss/bootstrap'; into another file whose extension was .css instead of .scss.