Vue Single File Components Not Showing Styles

So I'm trying to use styles within a vuejs single file component. I've had this working before within a node app, but this is with a python/flask back end. (Not that I think it should matter). Vue renders the component correctly, and everything seems to be fine, but it's completely ignoring my style tags.

Here's my test.vue:

<template>
  <div>
    <span class="foobar">Hello {{ foo }}</span>
  </div>
</template>

<script>
let my_component = {
  data: function () {
    return {
      foo: "world"
    }},
}

export default my_component
</script>

<style scoped>
.foobar {
  color: red;
}
</style>

Here's the HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Test SFC Page</title>
    </head>
    <body>
        <div id="test_component"></div>
        <script src="/static/js/test.js"></script>
    </body>
</html>

The contents of test.js:

import Vue from 'vue'
import TestComponent from './test.vue'

new Vue({
    el: "#test_component",
    render: h => h(TestComponent),
})

And my webpack config is very very simple. I basically used the same one that I used with my node/expressjs site because that worked, and webpack makes my head hurt.

const {VueLoaderPlugin} = require('vue-loader');

const config = {
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                ],
            },
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
    ],
}

module.exports = config

But obviously I'm doing something wrong. After googling around (and spending significant time on stack overflow), it seems like it's implied that webpack will create a separate css file for this that I then have to include, but no one seems to talk about how you make it do that, and I couldn't find that in my already-working node/express app, so maybe it doesn't always do that?

When the vue loader encounters a style section in a vue SFC, what does it actually do with those styles? Does it somehow inject them via javascript into the page itself?

Oh, and I'm using this command to run the build:

npx webpack --display-error-details --entry ./static/test/test.js --config ./scripts/webpack.config.js -o ./build/site/static/js/test.js --mode=development

Last piece of info - Something's definitely working partially correctly, because my final HTML output is containing the extra data tag that scoped puts in there. According to chrome's inspector - the final HTML looks like this:

<div data-v-3d196e1c>
<span data-v-3d196e1c class="foobar">Hello world</span>
</div>

And finally my package.json:

  "name": "my_app",
  "version": "1.0.0",
  "description": "Description Goes Here",
  "main": "app.js",
  "dependencies": {
    "axios": "^0.20.0",
    "vue": "^2.6.12",
    "vue-style-loader": "^4.1.2",
    "zxcvbn": "^4.4.2"
  },
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/preset-env": "^7.11.5",
    "babel-loader": "^8.1.0",
    "cross-env": "^7.0.2",
    "css-loader": "^4.3.0",
    "html-webpack-plugin": "^4.4.1",
    "vue-loader": "^15.9.3",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+ssh://git@gitlab.com/raphael_disanto/rpg.git"
  },
  "author": "RDSK",
  "license": "ISC",
  "bugs": {
    "url": "https://gitlab.com/raphael_disanto/rpg/issues"
  },
  "homepage": "https://gitlab.com/raphael_disanto/rpg#readme"
}

So I'm totally lost. I don't know if I'm getting it wrong with webpack, or with vue, or somewhere in between! It's frustrating because I have this working on a different site, and I didn't think I did anything different this time...