Webpack not recognizing css-loader despite it being in config

for some reason webpack is not recognizing css-loader, despite it being in the config and being installed. Here is my webpack.config.json

const path = require('path')

module.exports = {
  entry: './index.ts',
  module: {
    rules: [
      {
        test: /\.ts?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ["css-loader", "style-loader"],
        exclude: /node_modules/
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "sass-loader"],
        exclude: /node_modules/
      }
    ],
  },
  resolve: {
    extensions: ['.ts', '.js', '.css'],
  },
  mode: "production",
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
}

here is my index.ts import:

import 'bulma/css/bulma'

finally, here is my package.json:

{
  "name": "wasm-emulator",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {
    "bulma": "^1.0.2",
    "jszip": "^3.10.1",
    "ts-loader": "^9.5.1",
    "typescript": "^5.5.4"
  },
  "devDependencies": {
    "webpack": "^5.94.0",
    "webpack-cli": "^5.1.4",
    "css-loader": "^7.1.2",
    "sass": "^1.77.8",
    "sass-loader": "^16.0.1",
    "style-loader": "^4.0.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

I keep getting this error which says no loader is defined despite it being clearly defined:

Module parse failed: Unexpected character '@' (1: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

I'm not sure what's going on, everything looks right to me, is there something not glaringly obvious that I'm doing wrong?