title: Vue invalid CSS - expected 1 selector or at-rule,
body: <p>I'm trying to <code>npm run serve</code> in Vue and receiving the following error:</p>
  
  <pre><code>Failed to compile.
  
  ./src/App.vue?vue&amp;type=style&amp;index=0&amp;lang=sass&amp; (./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--9-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&amp;type=style&amp;index=0&amp;lang=sass&amp;)
  Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
  SassError: Invalid CSS after " ": expected 1 selector or at-rule, was "{"
          on line 1 of /Users/MatthewBell/GitHub/pollify/client/src/App.vue
  &gt;&gt;  {
  
     ^
  </code></pre>
  
  <p>Clearly it says the error is in <code>App.vue</code> and seems like a misplaced curly brace.</p>
  
  <p>But if check in that file there aren't even any curly braces there:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;div id="app"&gt;
          &lt;div id="nav"&gt;
              &lt;router-link to="/"&gt;Home&lt;/router-link&gt;|
              &lt;router-link to="/about"&gt;About&lt;/router-link&gt;
          &lt;/div&gt;
          &lt;router-view /&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;style lang="sass"&gt;
  #app
      @extend %global-styles
  &lt;/style&gt;
  </code></pre>
  
  <p>..And the file of class being extended.. <code>main.sass</code> is shown below. None of the imported sass sheets have curly braces either, so I'm sitting here very confused about the error message.</p>
  
  <pre><code>// Importing all our globally accessible stylesheets
  @import ./reset
  @import ./variables
  @import ./mixins_and_placeholders
  
  %global-styles
      font-family: $font
      -webkit-font-smoothing: antialiased
      -moz-osx-font-smoothing: grayscale
      background-color: $grey-3
      color: $text-black
  </code></pre>
  
  <p>I also searched this question on StackOverflow and some people seem to say it can be an issue with your config file, but I cant find any issues with my <code>vue.config.js</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>// vue.config.js
  module.exports = {
      css: {
          loaderOptions: {
              // pass options to sass-loader
              // @/ is an alias to src/
              // so this assumes you have a file named `src/variables.sass`
              // Note: this option is named as "data" in sass-loader v7
              sass: {
                  prependData: `
                  @import "@/styles/main.sass"
                  `
              }
          }
      }
  };
  </code></pre>
  
  <p>This was working fine before so it's not an issue with the prepend data path.</p>