如何在Vite和Vue3项目中集成Sass

安装sass

pnpm install sass -D

全局sass变量

分别新建两个文件

• assets/globalVar.scss
• assets/globalMixins.scss

引入

全局引入

在vite.config.js文件添加配置

export default defineConfig({
    ...
    css: {
        preprocessorOptions: {
            additionalData: '@import "@/assets/scss/globalVar.scss";@import "@/assets/scss/globalMixin.scss";'
        }
    }
});

按需引入

<style lang="scss" scoped>
    @import "@/assets/scss/globalVar.scss";
</style>

使用

• globalVar.scss

$color: #f00;

• globalMixin.scss

h1 {
    font-size: 50px;
    color: $bg-color;
}

• a.vue

<template>
    <h1>here</h1>
</template>

然后就生效了