Vue 无效的 CSS - 预期 1 个选择器或规则，答案

【问题标题】：Vue invalid CSS - expected 1 selector or at-rule,Vue 无效的 CSS - 预期 1 个选择器或规则，
【发布时间】：2020-04-15 23:39:40
【问题描述】：

我正在尝试在 Vue 中 npm run serve 并收到以下错误：

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"
                `
            }
        }
    }
};

这之前工作正常，因此前置数据路径不是问题。

【问题讨论】：

可能是您的 prependData @import 声明中的大量缩进。我不太了解 Sass，但缩进很重要，对吧？
@Phil 惊人的捕获 - 我没有建立该缩进在配置文件中重要的连接。这就是问题所在。谢谢！
@Phil，您真的应该将其添加为答案。有些人可能会认为这只是一个错字，但我认为这是一个微妙的错误，往往会占用大量调试时间，因为许多开发人员没有意识到刻度引用保留缩进。
@tao 我认为如果 OP 那时回答会更好。 TBH，我会花更长的时间试图弄清楚它应该是什么（是否需要换行符等），而 OP 已经解决了它
@tao 我已经继续并添加了答案

标签： vue.js sass

【解决方案1】：

正如菲尔在 cmets 中提到的那样。我的配置文件vue.config.js 中的缩进@import "@/styles/main.sass" 导致了这个问题，因为反引号保留了缩进。下面的语法解决了它：

// 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"`
            }
        }
    }
};

【讨论】：