最近遇到了一个坑
当在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等需要单独进行配置。