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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文介绍了一个使用Vue3开发的返回顶部组件,具有智能显示,丝滑动画,平滑滚动和类型安全等特性.文中的示例代码讲解详细,感兴趣的小伙伴可以了解下2026-04-04
这篇文章主要为大家详细介绍了vue实现移动端省市区选择，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
这篇文章主要介绍了vue修改Element的el-table样式的4种方法，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-09-09
这篇文章主要介绍了阿望教你用vue写扫雷小游戏，本文通过实例代码效果图展示的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-01-01
这篇文章主要介绍了关于Element-UI可编辑表格的实现过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要为大家详细介绍了Vue如何使用EasyPlayerPro实现播放本地MP4视频功能,感兴趣的小伙伴可以跟随小编一起学习一下2024-11-11
这篇文章主要介绍了vue3 父控件远程获取数据，在子组件上显示不出来，本文给大家分享两种解决方案帮助大家解决这个问题,需要的朋友可以参考下2023-08-08
本文主要介绍了vue中Props与Attrs的实现实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-09-09
这篇文章主要介绍了vue如何根据条件判断按钮是否可以点击，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最近在项目里用Element UI的动态组件时,遇到了样式修改的难题——明明写了CSS,但死活不生效！相信不少小伙伴也踩过这个坑,今天小杨就来分享几个实用技巧,帮你轻松搞定这类问题,需要的朋友可以参考下2025-07-07
最新评论