My attempt to incorporate the bootstrap css file into my app using Webpack (v4.5) by following the guidelines on the official website (https://getbootstrap.com/docs/4.0/getting-started/webpack/) is resulting in an error message while running webpack.
ERROR in ./node_modules/bootstrap/dist/css/bootstrap.min.css Module parse failed: Unexpected token (6:3) You may need an appropriate loader to handle this file type.
Despite all attempts, I have been unable to resolve this issue and fear that I might be overlooking a simple solution.
The css is imported into my code with:
import 'bootstrap/dist/css/bootstrap.min.css';
Below is how my webpack configuration appears:
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /js$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: { presets: ['react-app'] },
},
],
}
I have ensured that both css-loader
and style-loader
are installed and I am adhering to the webpack configuration specified by bootstrap in their documentation.
If anyone can identify where I may be going wrong, please advise. Thank you!