VueJS 2问题：无法在App.vue中使用导入的SCSS变量

我一眼就发现了问题所在，你的代码里有两个基础的SCSS语法错误，这才导致了编译失败：

错误1：SCSS变量定义格式错误 #

你的_variables.scss文件里，变量定义没遵循SCSS的规则——SCSS变量必须以$开头。你现在写的是：

height: 27px;

正确的写法应该是：

$height: 27px;

错误2：@import语句缺少分号 #

在App.vue的style部分，你的@import语句末尾没有加分号，SCSS要求所有语句必须以分号结尾。你现在的代码是：

@import 'src/assets/styles/_variables.scss'

修正后应该是：

@import 'src/assets/styles/_variables.scss';

修正后的完整代码 #

App.vue文件

<style lang="scss" scoped>
@import 'src/assets/styles/_variables.scss';
img {
  height: $height;
}
</style>

_variables.scss文件

$height: 27px;

之所以会出现Invalid CSS after "img": expected 1 selector or at-rule, was "{"这个看似奇怪的错误，是因为前面的语法错误导致SCSS编译器解析逻辑混乱，它没法正确识别后续代码的结构，才抛出了这个关联性不强的报错。把上面两个错误修正后，你的变量就能正常导入使用啦！

内容的提问来源于stack exchange，提问作者Max Silva