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

HectorU

于 2021-11-13 23:14:21 发布

阅读量1w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vite 文章标签： scss 前端 css

本文链接：https://blog.csdn.net/guojialin1987/article/details/121311981

Vite 专栏收录该内容

1 篇文章

订阅专栏

在Vue3和Vite2的开发环境中，遇到引入SCSS全局mixin样式时出现错误。通过配置vite.config.js的css.preprocessorOptions.scss.additionalData解决这个问题，引入`@import 'src/styles/index.scss';`。同时，对于外部样式如Element的主题，可以直接在main.js中引入`import './styles/theme/index.css';`。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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