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

845 阅读1分钟

最近遇到了一个坑
当在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的引入语法

image.png

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

3.总结

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