vue-cli中，sass编译报错

Question

已安装sass-loader和node-sass

login.vue中的样式

<style lang="sass" scoped>
$textColor: #fff;
.login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: {
        image: url('../assets/images/login_bg');
        repeat: no-repeat;
        size: 100% 100%;
    }
    color: $textColor;
    &-wrapper {
        display: flex;
        flex-direction: column;
        width: 400px;
        height: 200px;
        box-shadow: 0 0 2px 2px rgba(0,0,0,.4);
    }
    button {
        border: {
            top-color: #999;
            left: none;
            right: none;
            bottom: none;
        }
        color: $textColor;
        &:hover {
            background-color: rgba(255,255,255,.3);
        }
    }
}
</style>

报错信息：

我看了一下webpack的配置文件，里面已经加入了sass的解析配置，应该安装sass-loader和node-sass之后就可以直接用了的。只有我把样式注释掉才不报错...

------------------update---------------

我发现在.vue文件里把lang="sass"去掉可以编译，但是显然，页面上就没有样式了。。求指导呀。。

Answer 1

原来是在.vue文件里，style标签上的lang的值要写scss,而不是sass

Answer 2

因为你的代码语法是 scss 而不是 sass ，这是两个不同的语法规则