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

最新推荐文章于 2025-06-26 17:31:50 发布

chendf_

最新推荐文章于 2025-06-26 17:31:50 发布

阅读量1.9w

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue js

本文链接：https://blog.youkuaiyun.com/chendf__/article/details/115505855

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

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

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";'
      }
    }
  }