vite 项目中如何使用Sass
更新时间：2024年04月27日 16:58:45 作者：Carlos_sam
Vite默认集成了对Sass的支持,你只需要安装Sass本身即可,这篇文章主要介绍了vite 项目中如何使用Sass,需要的朋友可以参考下
1.安装
npm add sass
注意：有些博客中会告诉你需要 安装sass-loader和sass，这是webpack项目中的做法。而在Vite环境中，如果你想使用Sass预处理器，实际上并不需要单独安装sass-loader。Vite默认集成了对Sass的支持，你只需要安装Sass本身即可。
2.配置
在许多博客中都会告诉你要在vite.config.js中进行这样的配置：
export default defineConfig({
//...
css: {
// css预处理器
preprocessorOptions: {
scss: {
// 引入 mixin.scss 这样就可以在全局中使用 mixin.scss中预定义的变量了
// 给导入的路径最后加上 ;
additionalData: '@import "@/assets/style/mixin.scss";'
}
}
}
})这么做的目的是全局引入样式 (就是这部分additionalData: '@import "@/assets/style/mixin.scss";')
它其实等同于在main.js中写入以下的代码:
import { createApp } from 'vue'
import App from './App.vue'
import "@/assets/style/mixin.scss"
createApp(App).mount('#app')3.使用
详细的使用方法请参考：Sass: Sass Basics
参考资料
到此这篇关于vite 项目中如何使用Sass的文章就介绍到这了,更多相关vite 使用Sass内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue之elementUi的el-select同时获取value和label的三种方式
这篇文章主要介绍了vue之elementUi的el-select同时获取value和label的三种方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
这篇文章主要为大家详细介绍了基于vuejs+webpack的日期选择插件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
v-show通过CSS控制显示隐藏,保持DOM元素,适合频繁切换；v-if根据条件生成/销毁DOM,影响生命周期,适用于静态条件,两者在性能、渲染方式及组件状态管理上有显著差异,需根据具体场景选择,本文通过实例代码解析v-show和v-if的区别及使用,感兴趣的朋友一起看看吧2025-09-09
这篇文章主要介绍了vue中实现监听数组内部元素方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章给大家详细分析了关于VUE的常用的相关指令内容，对此有需要的朋友们可以学习下。2018-08-08
这篇文章主要给大家介绍了关于Vue生命周期的那些事,在使用vue开发过程中经常会接触到生命周期的问题,但对于每个钩子函数都做了什么,应用场景比较模糊,希望通过这次梳理让自己清楚一些,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了Nuxt3动态导入图片(本地)src实现过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2026-03-03
这篇文章主要介绍了Vuejs第九篇之组件作用域及props数据传递实例详解的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
在本篇文章中小编给大家分享了关于如何使用Vue.js方法创建模板并使用多个模板合成的相关知识点内容，需要的朋友们学习下。2019-06-06
文章主要内容是关于如何在项目中引入依赖项以及编写组件代码的步骤和总结,作者分享了个人经验,旨在为读者提供参考,并鼓励大家支持脚本之家2024-12-12
最新评论