White Space
WebLife

sass で SassError: Invalid CSS after ” * {“: expected “}”, was “{” とエラーが出る

  • CSS

Nuxt.js で sass を使おうとしたらエラーが！

SassError: Invalid CSS after ".header {": expected "}", was "{"
        on line 15 of ***\Header.vue
>> .header { {

実際のコードはこれ

<style lang="sass">
    .header {
        padding: 10px 25px 0;
        text-align: center;
        color: black;

        a {
            font-size: 10px;
        }
    }
</style>

.header の後に { が二回出てきてることになってる？なんで補完されてるんだろう？と思ったら、

<style lang="sass">

lang が sass になってました。sass では {} を省略した書き方なので、今回余計に {} がついてエラーになってました。使いたかったのは scss … ！

<style lang="scss">

これで解決しました。scss もひっくるめて sass って呼んでるのでわけわかんなくなってました