一、下载 sass
npm i sass sass-loader -D
二、在 src/styles/variable.scss ( 文件可根据个人习惯 ) 文件中定义项目所需要的 scss 全局变量。
三、在 vite.config.ts 文件中添加 scss 全局变量的配置项。
export default defineConfig({
plugins: [
... 略
],
// scss 全局变量配置项 (与plugins同级)
css:{
preprocessorOptions:{
scss:{
javascriptEnabled:true,
additionalData:'@import "./src/styles/variable.scss";',
},
},
},
})
四、需要使用到scss全局变量的时候,直接在组件中通过 " $变量名 " 使用即可。