Angular app wont build or run tests due to loader not being able to handle Leaflet css file

When trying to build or run tests in my Angular v18 application using Leaflet, I get the following error, serving works:

./node_modules/leaflet/dist/leaflet.css:3:0 - Error: Module parse failed: Unexpected token (3:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| /* required styles */
|
> .leaflet-pane,
| .leaflet-tile,
| .leaflet-marker-icon,


I tried installing css loader and style loader, and tried adjusting webpack.config.js + added the css files to angular.json

angular.json:

"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": "dist/fieldsightsolutions-frontend",
"index": "src/index.html",
"browser": "src/main.ts",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "public"
},
{
"glob": "**/*",
"input": "./node_modules/leaflet/dist/images"
},
{
"glob": "**/*",
"input": "./node_modules/leaflet-draw/dist/images"
}
],
"styles": [
"src/styles.css",
"node_modules/leaflet/dist/leaflet.css",
"node_modules/leaflet-search/dist/leaflet-search.min.css",
"node_modules/leaflet-control-geocoder/dist/Control.Geocoder.css",
"node_modules/leaflet-geosearch/dist/geosearch.css",
"node_modules/leaflet-draw/dist/leaflet.draw.css",
"src/app/pages/map/map.component.css"
],


webpack.config.js:

module: {
rules: [
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader',
'postcss-loader',
],
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
],
},

Continue reading...