在使用Vue3 + Vite2开发过程中，使用了SCSS

以往在main.js使用引入全局样式表就可以了

@import './styles/mixins.scss';

但是实操中得到了这样的一个错误

[vite] Internal server error: Undefined mixin.
4 │     @include flex-row-lc;

翻阅文档: https://vitejs.bootcss.com/config/#css-preprocessoroptions

得知需要通过配置vite指定传递给 CSS 预处理器的选项来引入全局mixin样式

vite.config.js :

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: "@import 'src/styles/index.scss';"
      }
    }
  }
})

这样配置就可以了

但是这里引申出一个问题：比如引入其他外部的样式表该如何处理？
比如还需要引入element的theme该如何处理？

在main.js /.ts 里面照常引入：

// element
import "./styles/theme/index.css";