vue3.0项目中全局注入scss样式不生效原因

vue3.0项目中全局注入scss样式不生效原因

vite.config.ts 中 全局 scss 使用如下配置

export default defineConfig({
    
    
	css: {
    
    
	  preprocessorOptions: {
    
    
	    //全局scss变量
	    scss: {
    
    
	      additionalData: `@import '@/styles/variables.scss';`,
	    },
	  },
	}
})

写法没有问题的

上面 vite.config.ts 中配置的全局引入 scss，会在每个使用 scss 的 vue 组件中引入。因此，此处适合配置全局变量和 mixin 之类，单纯的全局样式，不建议在此处引入。

原来这不是一个bug，只有在main.js引入一个其他scss文件或者在.vue文件中使用<style>，并且里面有内容（猜测因为配置文件是在每个 vue 文件单独引入的原因），则 scss.additionalData 配置的全局scss文件就可以正确引入了，还建议我们在 scss.additionalData 引入的文件最好只写scss变量，别写css变量，因为css变量是运行时属性