怎么在vite项目中全局导入一个scss文件

简介: 在Vite项目中全局导入SCSS文件的方法:通过配置`vite.config.js`中的`css.preprocessorOptions.scss.additionalData`属性,可以将SCSS变量或混合内容全局引入。此方法同样适用于LESS文件。详情参见Vite官方文档。

怎么在vite项目中全局导入一个scss文件

🎉🎉🎉欢迎来到我的博客,我是一名自学了2年半前端的大一学生,熟悉的技术是JavaScript与Vue.目前正在往全栈方向前进, 如果我的博客给您带来了帮助欢迎您关注我,我将会持续不断的更新文章!!!🙏🙏🙏

1.前言

在我的某个项目中遇到了需要把一个scss文件中全部的变量,混合导入到全局css中,在我查阅了官方文档后解决了,在这我分享给大家

2.解决过程

打开你的项目,找到vite的配置文件

在这里插入图片描述

画红圈的地方就是导入全局scss文件的,less文件也可以

该属性在vite文档的地址

原理就是在全局scss文件中导入你自己的scss文件,然后再进行css的解析,于是你写的变量和混合就解析到你的全局css中了.

结语

Hi👋,这里是瑞雨溪->一个喜欢JavaScript和Vue的大学生,如果我的文章给你带来的帮助,欢迎您关注我->我会持续不断的更新更多优质文章.你的关注就是我的动力!!!🎉🎉🎉

目录
相关文章
|
6月前
|
JavaScript 前端开发
如何在Vite创建的Vue项目中全局注入SCSS变量/混合器?
如何在Vite创建的Vue项目中全局注入SCSS变量/混合器?
797 158
|
JavaScript
vue3 使用element plus 打包时 报错
vue3 使用element plus 打包时 报错
722 0
【已解决】TypeError: Cannot destructure property `createHash` of ‘undefined‘ or ‘null‘
【已解决】TypeError: Cannot destructure property `createHash` of ‘undefined‘ or ‘null‘
1626 1
Vue3报错:Extraneous non-props attributes (style) were passed to component but could not be automatical
Vue3报错:Extraneous non-props attributes (style) were passed to component but could not be automatical
5258 1
|
JavaScript
【第12期】Vue3+TypeScript+Vite中动态引入图片等静态资源
【第12期】Vue3+TypeScript+Vite中动态引入图片等静态资源 c
2683 0
|
JavaScript API 数据处理
vue3使用pinia中的actions,需要调用接口的话
通过上述步骤,您可以在Vue 3中使用Pinia和actions来管理状态并调用API接口。Pinia的简洁设计使得状态管理和异步操作更加直观和易于维护。无论是安装配置、创建Store还是在组件中使用Store,都能轻松实现高效的状态管理和数据处理。
977 3
|
JavaScript IDE 开发工具
找不到模块“./App.vue”或其相应的类型声明。ts(2307)
这篇文章介绍了在Vue 3 + TypeScript + Vite开发环境中解决找不到`.vue`文件模块或其类型声明错误的两种方法:使用VSCode的TypeScript Vue Plugin (Volar)插件或手动在`env.d.ts`文件中声明`*.vue`模块类型。
3946 1
找不到模块“./App.vue”或其相应的类型声明。ts(2307)
|
前端开发 JavaScript
vite中如何更优雅的使用css
【8月更文挑战第2天】webpack中,我们需要在项目中安装css-loader才能让webpack识别css文件。vue-cli基于webpack,内置了这个loader ,Vite天生就是支持对CSS文件的直接处理的。
951 5
vite中如何更优雅的使用css
|
前端开发 JavaScript 编译器
Vite中预处理器(如less)的配置
【8月更文挑战第2天】Vite中预处理器(如less)的配置
1851 4