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+bpmn.js实现自定义流程图的完整代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借价值,需要的朋友参考下吧2024-03-03
这篇文章主要介绍了Vue实现星级评价效果的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-12-12
这篇文章主要介绍了vue使用file-saver插件保存各种格式文件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
本文主要介绍了VUE 自定义取色器组件的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
记录一下踩坑,前几天从同事手上接手了一个Vue的项目,下面这篇文章主要给大家介绍了关于VUE项目运行失败原因及解决办法的相关资料,本文以vscode为例,需要的朋友可以参考下2023-06-06
解决Vue路由导航报错:NavigationDuplicated: Avoided redundant navig
这篇文章主要给大家介绍了关于解决Vue路由导航报错:NavigationDuplicated: Avoided redundant navigation to current location的相关资料,这是最近做项目时候遇到的一个问题,现将解决办法分享出来,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了深入理解Vuex的作用，对Vuex感兴趣的同学，可以参考下2021-05-05
bpmn.js是一个BPMN2.0渲染工具包和web建模器,使得画流程图的功能在前端来完成,这篇文章主要给大家介绍了关于vue3集成bpmn.js的相关资料,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了开启Vue项目缺少node_models包的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要为大家介绍了Vue自定义指令，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
最新评论