Trouble adding Bootstrap 4 CSS with Webpack 4 in ReactJS SpringBoot Application - css

Question

I am getting an error where webpack is not able to resolve the bootstrap 4 css which is sitting in the node_modules directory. I have looked at a number of tutorials around webpack 4 and bootstrap 4 but I am thinking it is not in the same folder structure.
I've also tried changing the import bootstrap css trying to change the directory to push it to the node_modules directory but that does not seem to work.
Error log from Spring Tool Suite
[INFO] ERROR in ./src/main/resources/static/js/app.js
[INFO] Module not found: Error: Can't resolve 'bootstrap/dist/css/boostrap.min.css' in 'C:\sourcecode\personal-website\src\main\resources\static\js'
[INFO] # ./src/main/resources/static/js/app.js 26:0-46
webpack.config.js
var path = require('path');
module.exports = {
entry: './src/main/resources/static/js/app.js',
performance: {
hints: false
},
output: {
path: __dirname,
filename: './src/main/resources/static/built/bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['#babel/react', '#babel/env']
}
},
{
test: /\.css$/,
include: /stylesheets|node_modules/,
use: [ "style-loader", "css-loader" ]
}
]
}
};
app.js
import 'bootstrap';
import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/boostrap.min.css';
import Landing from './components/Landing';
class App extends React.Component {
render() {
return (
<div className="container">
<Landing />
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('react-app')
);

Answer 1

I'm not sure what your folder structure is like. But, I believe everything is relative to the location of the file where you're importing bootstrap's css from.
Given the folder structure below
sourceCode
|--node_modules
|--bootstrap
|--dist
|--css
|--bootstrap.min.css
|--routes
|--src
|--main
|--resources
|--static
|--app.js
|--dist
|--views
if you're importing bootstrap's CSS stylesheet in the app.js script, it would go like:
import '../../../../node_modules/bootstrap/dist/css/bootstrap-min.css';
The double period (..) means you're moving one step up the folder structure/tree.
You did say you've tried changing your import. But, I based my answer on what you've shown.
On the other hand, try taking a look at VS Code then check out the Path Intellisense extension. It'll help you with those imports. Happy coding :)