vue3中vite使用sass的配置方法
更新时间：2024年01月12日 09:46:18 作者：waterkid0
这篇文章主要介绍了vue3中vite使用sass的配置方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
vue3+vite使用scss
1、安装依赖
npm install sass -d
2、配置vite.config.js
css: {
preprocessorOptions: {
scss: {
additionalData:'@import "@/assets/styles/main.scss";'
}
}
},3、在对应目录下创建main.scss
$blue: #3385ff
4、在对应文件引用变量，成功！
扩展：
vue3+vite应用中添加sass预处理器
一、如何安装
进入项目目录直接npm安装即可，不用繁琐的各种配置
npm install --save-dev sass
如果安装了，但是运行vite启动项目依旧出现报错，请检查package.json文件中，sass是不是在依赖配置中，把他移动到开发依赖中即可，一般为安装sass的时候npm没有加–save-dev所导致的。
二、加入全局scss文件
打开vite的配置文件，在里面加入css的配置即可
cssPreprocessOptions: {
scss: {
additionalData: '@import "./src//scss/common.scss";' // 全局公共样式
}
}三、关于sass的“…Using / for division…”报错
这是由于sass版本导致的问题，不影响项目编译，解决方法：
1.将“/”的位置改为match.dev(arg1,arg2)
@use "sass:math"; /* 头部不要忘记加入这个，不然会报错找不到math */ /* 将这个 */ @return ($px/$rem)+rem; /* 改为下边这个 */ @return match.div($px,$rem)+rem;
2.使用官方sass-migrator工具
$ npm install -g sass-migrator $ sass-migrator division **/*.scss
官方对这个问题的更多信息请查看：Sass: Breaking Change: Slash as Division (sass-lang.com)
到此这篇关于vue3中vite使用sass的文章就介绍到这了,更多相关vue3使用sass内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了使用echarts柱状图实现select下拉刷新数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue项目配置eslint保存自动格式化问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
moment.js是一款现在对时间处理的强大的函数，这篇文章主要介绍了Vue 日期获取的示例代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了Vue3中多个弹窗同时出现的解决思路,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
本篇文章主要介绍了基于vue-cli的vuex配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
详解Vue中localstorage和sessionstorage的使用
这篇文章主要介绍了详解Vue中localstorage和sessionstorage的使用方法和经验心得，有需要的朋友跟着小编参考学习下吧。2017-12-12
这篇文章主要介绍了Vue SPA单页应用首屏优化实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要给大家介绍了关于vue中点击下载图片的实现方法,在Vue的模板中,我们可以将下载属性绑定至或元素上,用来实现点击下载,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了vue 导入js中的方法,本文通过两种方法结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
本文主要介绍了vue 权限管理几种实现方法,权限需要前后端结合,前端尽可能的去控制,更多的需要后台判断,具有一定的参考价值,感兴趣的可以了解一下2024-02-02
最新评论