在vite中配置scss预处理遇到的坑

最新推荐文章于 2025-09-04 11:12:46 发布

原创最新推荐文章于 2025-09-04 11:12:46 发布 · 1.9w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js

本文档详细记录了解决Vite运行时因CSS预处理器配置错误导致的报错过程。作者在vite.config.ts中设置了scss预处理器选项，尝试引入全局变量文件var.scss。最初由于路径末尾缺少分号导致报错，修正后的配置是在additionalData中为导入路径添加了分号，从而成功解决了问题。

vite运行报错

在这里插入图片描述
vite.config.ts配置

css: {
    // css预处理器
    preprocessorOptions: {
      scss: {
        // 引入 var.scss 这样就可以在全局中使用 var.scss中预定义的变量了
        additionalData: '@import "./src/assets/scss/var.scss"'
      }
    }
  }

helloWorld.vue

<style lang="scss">
	a {
		color: yellow;
	}
</style>

var.scss

$default-color: #409eff;

找了半天然后发现是因为在设置预处理css的时候路径最后要加上 ;

修改vite.confit.ts配置

css: {
    // css预处理器
    preprocessorOptions: {
      scss: {
        // 引入 var.scss 这样就可以在全局中使用 var.scss中预定义的变量了
        // 给导入的路径最后加上 ; 
        additionalData: '@import "./src/assets/scss/var.scss";'
      }
    }
  }

在vite中配置scss预处理遇到的坑

vite运行报错

3 条评论