Module not found: Can't resolve './alert' in '/mydirectory/node_modules/bootstrap/scss'

[adrian2020my]

I use @import "~bootstrap/scss/bootstrap"; in my custom.scss but when webpack tries to compile, the following error appears:

Failed to compile.

./node_modules/bootstrap/scss/bootstrap.scss
Module not found: Can't resolve './alert' in 'mydirectory/node_modules/bootstrap/scss'

Please kindly advise on resolving this issue as I'm not able to customise my css using mixins from bootstrap.

My webpack.config file is as below:
webpack.config.txt

[alexander-akait]

@adrian2020my please provide minimum reproducible test repo, we can't help without structure and version bootstrap, thanks

[adrian2020my]

Thanks for the reply. @evilebottnawi Here is the repo: https://github.com/adrian2020my/webpackBootstrap

[alexander-akait]

@adrian2020my can you decrease sass-loader version to 6? and test again?

[adrian2020my]

I lowered the version of sass-loader to 6.0.7 but it still doesn't compile. @evilebottnawi

[alexander-akait]

@adrian2020my includePaths: ['src', 'node_modules'] for sas-loader options?

[adrian2020my]

@evilebottnawi Sorry, it works. I managed to compile it, had to remove the previous version first before reinstalling the older version of sass-loader. May I know why it doesn't compile in the latest version?

[alexander-akait]

@adrian2020my #556 on next week i will try to find time on fix it, just regression

[alexander-akait]

Can we close issue?

[adrian2020my]

@evilebottnawi sorry for my previous comment, it still doesn't work. When I tested the working one, I accidentally removed the import "~bootstrap/scss/bootstrap"; After I tried it, still doesn't compile.

[adrian2020my]

@evilebottnawi Currently, I'm back to square one. ./node_modules/bootstrap/scss/bootstrap.scss
Module not found: Can't resolve './alert' in '/frontend/node_modules/bootstrap/scss'

[alexander-akait]

@adrian2020my #567 (comment)?

[adrian2020my]

@evilebottnawi Yes, that comment about it working was false. In that particular part, I accidentally removed the import "~bootstrap/scss/bootstrap"; so it worked.(was doing other stuff, so had to make it work) My problem was that when I do the import, it doesn't compile. So sorry for that.

[adrian2020my]

After struggling with this issue the entire day, I managed to go around my problem by following the instructions in facebook/create-react-app: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc . I was not able to fully resolve my issue in regards to the importing the bootstrap module. Maybe facebook has configured webpack to the point where it's hard to directly import sass file from node_modules/ to the src directory.

[jsg2021]

This must be a duplicate of #566

[alexander-akait]

@jsg2021 yep, duplicate thanks!

[MAGDD]

1 .import own scss langage not css langage so app.css should be app.scss
2. add .addStyleEntry('css/app', './assets/css/app.scss') in webpack.config.js file
3. be sure node-sass et sass-loader are installed(yarn add -D node-sass sass-loader)

[vegagame]

1 .import own scss langage not css langage so app.css should be app.scss
2. add .addStyleEntry('css/app', './assets/css/app.scss') in webpack.config.js file
3. be sure node-sass et sass-loader are installed(yarn add -D node-sass sass-loader)

Good! It work also for me! :)