Webpack 5 - Module parse failed: Unexpected character '@' (1:0)

I'm learning Webpack and I've ran into a problem that I can't figure out. When I don't have babel in the rules, it works fine but when I include it, I get an error once I run "npm run build". (Disregard the content, just trying to see if I can get sass and babel to work in webpack)

src/index.js

import generateJoke from "./generateJoke";
import "./styles/main.scss";

console.log(generateJoke());

let name = "Jermond";
let hobby = "basketball";
let result = () => console.log(`my name is ${name} and i love ${hobby}`);
result();

src/styles/main.scss

@import "variables", "mixins";

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  entry: {
    bundle: path.resolve(__dirname, "src/index.js"),
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].[contenthash].js",
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          "style-loader", // 3. Inject styles into DOM
          "css-loader", // 2. Turns css into common JS
          "sass-loader", // 1. Turns sass into css
        ],
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Webpack App",
      filename: "index.html",
      template: "src/template.html",
    }),
  ],
};

package.json

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.18.5",
    "@babel/preset-env": "^7.18.2",
    "babel-loader": "^8.2.5",
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "sass": "^1.52.3",
    "sass-loader": "^13.0.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.9.2"
  }
}