Vue invalid CSS - expected 1 selector or at-rule, - vue.js

Question

I'm trying to npm run serve in Vue and receiving the following error:
Failed to compile.
./src/App.vue?vue&type=style&index=0&lang=sass& (./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&type=style&index=0&lang=sass&)
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
>> {
^
Clearly it says the error is in App.vue and seems like a misplaced curly brace.
But if check in that file there aren't even any curly braces there:
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link>|
<router-link to="/about">About</router-link>
</div>
<router-view />
</div>
</template>
<style lang="sass">
#app
#extend %global-styles
</style>
..And the file of class being extended.. main.sass is shown below. None of the imported sass sheets have curly braces either, so I'm sitting here very confused about the error message.
// 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
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 vue.config.js:
// 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"
`
}
}
}
};
This was working fine before so it's not an issue with the prepend data path.

Answer 1

As Phil mentioned in the comments. The indented #import "#/styles/main.sass" in my config file vue.config.js was causing the issue, since backticks preserve indentation. The following syntax solves it:
// 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"`
}
}
}
};