vue在main.js引入sass，在组件中使用变量报错

Question

我写了个全局的样式变量然后在main.js中引入在组件中使用这些变量然后就报错了请问该怎么解决

Answer 1

sass的变量，只能组件需要的时候，以import的方式引入。
main.js中引入的sass文件，可以作为全局样式。全局变量，在webpack看来，是无法识别的。

Answer 2

如果兼容性要求不是很高，可以考虑使用css变量(sass中可以使用)，用法如下：

css文件

@charset "UTF-8";

:root {

    --color: red;

}

main.js文件

reqiure('XXX/XXX/var.css')

vue文件中

#app {

    color: var (--color);

}

Answer 3

在组件中引入样式看看

Answer 4

你的@在sass里面是无法使用的，获取不到相应的路径，你换成相对路径试试看