vue3+vite使用scss全局变量的几个坑

最近遇到了一个坑
当在vue模板的中使用scss中的@mixin时，报错提示Undefined mixin xx。

1.第一个坑——需要在vite中配置

原本是将scss文件统一引入到main.ts中，经过查阅后，scss中的全局变量是不能直接在main.ts中生效的。需要在vite.config.ts中添加以下配置

css: {
  preprocessorOptions: {
    scss: {
      additionalData: `@import '@/styles/global/index.scss';`,
    },
  },
},

注意:此处引入路径不要忘记最后的分号;否则也会报错

2.第二个坑——注意scss的引入语法

在引入的时候，vscode提示得很顺手，结果就是用成了@import url()语法（这是原生css的语法），但其实，应该使用@import ''语法的。

3.总结

在使用scss时，正常的样式，包括重置样式文件以及原生css变量等，可以直接引入main.ts中，但scss变量以及@mixin等需要单独进行配置。