vue3中集成sass实现全局scss样式变量

一、安装sass

npm i sass?
?

二，在style/variable.scss创建一个variable.scss文件

// 给项目提供的scss全局变量
$mycolor:red;
?

三、在vite.config.ts文件配置如下:

export default defineConfig({
? plugins: [
? ? vue(),
? // scss全局变量的一个配置
? css: {
? ? preprocessorOptions: {
? ? ? scss: {
? ? ? ? javascriptEnabled: true,
? ? ? ? additionalData: '@import "./src/styles/variable.scss";',
? ? ? },
? ? },
? },
})

四、可以使用了，在style标签中通过$定义的全局变量名字就可以获取对应的值了

<style scoped lang="scss">

div{

? h1{

? ? color: $color;

? ? size: 60px;

? ? font-size: $fontSize;

? }

}

</style>

?