vue3项目sass全局变量的设置和使用

l### 安装sass

 npm i sass sass-loader --save-dev

src 下新建如下目录

index.scss 相当于入口文件，所有全局的scss 文件可以在这里引入
normalize.scss 是统一样式的文件， 在 index.scss中引入就好了
variables.scss 是全局的scss 的变量文件

我们可以在main.ts 中引入 index.scss

新版的scss 中引入用的是 @USE 老版的用的是 @import (scss文件引入其它的scss文件)

以上是scss 的引入问题
下面我们要看 全局scss 变量的使用
在vite.config.js 中配置如下

export default defineConfig({plugins: [vue(), vueDevTools()],css: {preprocessorOptions: {scss: {javascriptEnabled: true,additionalData: `@use "@/styles/variables.scss" as *;`,},},},
})

注意文件的路径
配置完成之后就可以在任意文件中使用了（记得要重启一下项目）