Vue неверно CSS - ожидается 1 селектор или правило,

Question

Я пытаюсь npm run serve в Vue и получаю следующую ошибку:

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
>>  {

   ^

Ясно, что это говорит об ошибке в App.vue и похоже на неуместную фигурную скобку.

Но если проверить в этом файле, там даже нет фигурных скобок:

<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>

.. И файл расширяемого класса .. main.sass показан ниже. Ни у одного из импортированных листов sass также нет фигурных скобок, поэтому я сижу здесь, очень смущенный сообщением об ошибке.

// 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

Я также искал этот вопрос в StackOverflow, и некоторые люди, кажется, говорят, что это может быть проблема с вашим конфигурационным файлом, но я не могу найти никаких проблем с моим 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"
                `
            }
        }
    }
};

Раньше это работало нормально, поэтому это не проблема с предустановленным путем данных.

Answer 1

Как отметил Фил в комментариях. Отступ @import "@/styles/main.sass" в моем конфигурационном файле 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"`
            }
        }
    }
};