vue3中使用vite配置scss，less部署全局

1、vite.config.ts

// vite.config.ts
css: {
      preprocessorOptions: {
        css: { charset: false },
        less: { 
          modifyVars: {
            hack: 'true; @import "@/theme/mixins";',
          },
          javascriptEnabled: true,
        },
        scss: {
          additionalData:'@import "@/theme/style";'
        }
      }
    },

2、src/theme/mixins.less

@baseImg: '@/assets/images';
.cover(@src, @size: 100% 100%, @position: center center) {
    background-image: url('@{baseImg}/@{src}.png');
    background-position: @position;
    background-repeat: no-repeat;
    background-size: @size;
}

3、src/theme/style.scss

$font-color-gray: rgb(147, 147, 147);

4、这样就可以将scss，less文件导入到全局了，但是在使用的时候还是要区分出来的呢，比如在vue文件中

<style lang="less" scoped></style>这下面只能使用less命名的类，例如只能使用.cover()，使用$font-color-gray就会出现错误了，scss也是同理。