vue3.0项目中全局注入scss样式不生效原因
原来这不是一个bug,只有在main.js引入一个其他scss文件或者在.vue文件中使用,并且里面有内容(猜测因为配置文件是在每个 vue 文件单独引入的原因),则 scss.additionalData 配置的全局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变量是运行时属性
更多推荐
已为社区贡献4条内容
所有评论(0)