Webpack issues rendering CSS in Vue when *not* using CLI

I am using Vue (v2) for the first time and am building my app from scratch because my instructor doesn't want us to use the CLI boilerplate. I've been stuck for hours and cannot figure out how to render the CSS in the < style > tags of a component's .vue file. I think it has to do with my webpack configuration... the build is successfully compiling, but the styling does not render if it is in the < style > tags.

I am able to get the CSS to render by way of an external style sheet (am linking it in my index.html), but isn't the point of Vue to have a component's everything (template, script, styles) in one place (the .vue file)? Gah. Please take a look at my webpack config below and let me know if anything catches your eye. This is only my second time dealing with webpack, so I'm definitely still learning the ropes.

const { join } = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const { HotModuleReplacementPlugin } = require('webpack');
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: join(__dirname, 'src/app.js'),
  output: {
    path: join(__dirname, 'build'),
    filename: 'app.min.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
        },
      },
      {
        test: /\.vue$/,
        use: 'vue-loader',
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new HotModuleReplacementPlugin(),
    new VueLoaderPlugin(),
    new HTMLWebpackPlugin({
      showErrors: true,
      cache: true,
      template: (join(__dirname, 'index.html')),
    }),
  ],
};

And here is my package.json if that is helpful.

{
  "name": "ontheroadagain",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon index.js",
    "dev": "webpack-dev-server --mode development",
    "prod": "webpack --mode production",
    "test": "eslint --fix *.js",
    "fix": "eslint --fix *.js",
    "build": "webpack --config webpack.config.dev.js -w"
  },
  "repository": {
    "type": "git",
    "url": "an actual url is here"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "an actual url is here"
  },
  "homepage": "an actual url is here",
  "devDependencies": {
    "@babel/cli": "^7.11.6",
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "babel-loader": "^8.1.0",
    "css-loader": "^4.3.0",
    "eslint": "^7.10.0",
    "eslint-config-airbnb-base": "^14.2.0",
    "eslint-plugin-import": "^2.22.1",
    "html-webpack-plugin": "^4.5.0",
    "husky": "^4.3.0",
    "vue-loader": "^15.9.3",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "express": "^4.17.1",
    "mysql2": "^2.2.5",
    "sequelize": "^6.3.5",
    "vue": "^2.6.12",
    "vue-router": "^3.4.5"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run fix",
      "pre-push": "npm run fix",
      "...": "..."
    }
  }
}