[JavaScript知识库][vite] Internal server error: Undefined mixin / Undefined variable. Vite+Vue3+TS+SCSS 全局样式引入出错解决方案

在使用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";