Vue3在Vite中配置scss并使用

提出问题

单个文件引入时，需要在每个 style lang="scss" scoped标签下这样引入,每次都要手动引入非常麻烦，因此就想做全局配置

@import "@/assets/scss/global.scss"

解决方案

1.下载好sass 和 sass-loader

npm install sass --save-dev
npm install sass-loader --save-dev

2.在vite中配置

// vite.config.ts
export default defineConfig({
  .......,
  resolve: {
    alias: {
      '@': resolve('./src')
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 两种方式都可以
        additionalData: '@import "@/assets/scss/global.scss";'
        // additionalData: '@use "@/assets/scss/global.scss" as *;'
      }
    }
  },
  ....
})

// global.scss
$font-color-gray:rgb(147,147,147);

3.在vue项目中使用

<script setup lang="ts"></script>

<template>
........
</template>

<style lang="scss" scoped>
.publish-info {
          font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans',
            sans-serif;
          font-size: 12px;
          line-height: 12px;
          color: $font-color-gray; // 这里引入
}
</style>

注意事项

在main.js中不要再次引入global.scss文件，否则会报已经加载过的错误。