VUE 独立引入SASS 文件 报 Invalid CSS after ".sass {": expected "}"

Question

VUE 独立引入SASS 文件 报 Invalid CSS after ".sass {": expected "}", was "{"

这样写 不报错 能正确执行

<style rel="styleheet/less" lang="sass">
    $fontStack: Helvetica, sans-serif;
    $primaryColor: yellow;
    $size: 30px;
    .sass {
        font-family: $fontStack;
        color: $primaryColor;
        font-size: $size;
    }
</style>

但是我分折出来，就报Invalid CSS after ".sass {": expected "}", was "{"

<style src="./style/index.sass" lang="sass"></style>

我把index.sass里的内容删除完。又不报错了！ 恢复又报错，不知道什么原因引起的！

Answer 1

你写的是 scss 语法，不是 sass 语法，lang 改成 scss 就可以了。

sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号。