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

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