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里面是无法使用的，获取不到相应的路径，你换成相对路径试试看