title: Vue Single File Components Not Showing Styles
body: <p>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.</p>
  <p>Here's my test.vue:</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;span class=&quot;foobar&quot;&gt;Hello {{ foo }}&lt;/span&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  let my_component = {
    data: function () {
      return {
        foo: &quot;world&quot;
      }},
  }
  
  export default my_component
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  .foobar {
    color: red;
  }
  &lt;/style&gt;
  </code></pre>
  <p>Here's the HTML:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
      &lt;head&gt;
          &lt;title&gt;Test SFC Page&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id=&quot;test_component&quot;&gt;&lt;/div&gt;
          &lt;script src=&quot;/static/js/test.js&quot;&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>The contents of test.js:</p>
  <pre><code>import Vue from 'vue'
  import TestComponent from './test.vue'
  
  new Vue({
      el: &quot;#test_component&quot;,
      render: h =&gt; h(TestComponent),
  })
  </code></pre>
  <p>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.</p>
  <pre><code>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
  </code></pre>
  <p>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?</p>
  <p>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?</p>
  <p>Oh, and I'm using this command to run the build:</p>
  <pre><code>npx webpack --display-error-details --entry ./static/test/test.js --config ./scripts/webpack.config.js -o ./build/site/static/js/test.js --mode=development
  </code></pre>
  <p>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:</p>
  <pre><code>&lt;div data-v-3d196e1c&gt;
  &lt;span data-v-3d196e1c class=&quot;foobar&quot;&gt;Hello world&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And finally my package.json:</p>
  <pre><code>  &quot;name&quot;: &quot;my_app&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;description&quot;: &quot;Description Goes Here&quot;,
    &quot;main&quot;: &quot;app.js&quot;,
    &quot;dependencies&quot;: {
      &quot;axios&quot;: &quot;^0.20.0&quot;,
      &quot;vue&quot;: &quot;^2.6.12&quot;,
      &quot;vue-style-loader&quot;: &quot;^4.1.2&quot;,
      &quot;zxcvbn&quot;: &quot;^4.4.2&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.11.6&quot;,
      &quot;@babel/plugin-syntax-dynamic-import&quot;: &quot;^7.8.3&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.11.5&quot;,
      &quot;babel-loader&quot;: &quot;^8.1.0&quot;,
      &quot;cross-env&quot;: &quot;^7.0.2&quot;,
      &quot;css-loader&quot;: &quot;^4.3.0&quot;,
      &quot;html-webpack-plugin&quot;: &quot;^4.4.1&quot;,
      &quot;vue-loader&quot;: &quot;^15.9.3&quot;,
      &quot;vue-template-compiler&quot;: &quot;^2.6.12&quot;,
      &quot;webpack&quot;: &quot;^4.44.1&quot;,
      &quot;webpack-cli&quot;: &quot;^3.3.12&quot;
    },
    &quot;scripts&quot;: {
      &quot;test&quot;: &quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;
    },
    &quot;repository&quot;: {
      &quot;type&quot;: &quot;git&quot;,
      &quot;url&quot;: &quot;git+ssh://git@gitlab.com/raphael_disanto/rpg.git&quot;
    },
    &quot;author&quot;: &quot;RDSK&quot;,
    &quot;license&quot;: &quot;ISC&quot;,
    &quot;bugs&quot;: {
      &quot;url&quot;: &quot;https://gitlab.com/raphael_disanto/rpg/issues&quot;
    },
    &quot;homepage&quot;: &quot;https://gitlab.com/raphael_disanto/rpg#readme&quot;
  }
  </code></pre>
  <p>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...</p>