vite自动引入scss全局变量

背景

当项目越来越大的时候，便于后期维护和代码的编写效率  提取css是必须的  但是每个页面都又可能用到全局声明的 scss变量  每个页面引入？ 显然不是程序猿的作风，这时就要引入scss全局变量了。

实现步骤

1、首先项目需要安装sass

yarn add sass -D

2、vite.config.ts文件里

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [{ find: '@', replacement: resolve(__dirname, 'src') }],
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/assets/styles/mixin.scss";',
      },
    },
  },
});

3、这样就可以在vue文件里用mixin.scss里的scss变量了

//注意要给style加上lang="scss"

<style scoped lang="scss">

...

</style>