vue3+vite应用中添加sass预处理器问题
更新时间：2024年02月08日 17:02:37 作者：普通网友
这篇文章主要介绍了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)
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
今天小编就为大家分享一篇vue项目引入字体.ttf的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
Vue3路由组件内的路由守卫onBeforeRouteLeave和onBeforeRouteUpdate使用
这篇文章主要介绍了Vue3路由组件内的路由守卫onBeforeRouteLeave和onBeforeRouteUpdate使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
这篇文章主要为大家详细介绍了Vue实现动态路由的相关知识,主要涉及到两个方面：一是路由的动态添加,二是基于路由的参数变化来动态渲染组件,下面就跟随小编一起深入学习一下动态路由的实现吧2024-02-02
在Vue3中,ref提供了访问组件内DOM元素和子组件实例的方法,防抖是一种限制函数调用频率的方法,即在一定时间内多次触发同一个函数,只执行最后一次触发的函数,本文将给大家介绍了Vue3如何利用自定义ref实现防抖,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了vue 如何根据选择的月份动态展示日期对应的星期几，帮助大家更好的利用vue框架处理日期需求，感兴趣的朋友可以了解下2021-02-02
在Vue中,我们可以使用unplugin-generate-component-name插件自动基于目录名称生成组件名称,这个插件使得在大型代码库中找到和管理组件更加容易和直观,这篇文章主要介绍了Vue自动生成组件示例总结,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了Vue toRef toRefs toRaw函数使用示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-03-03
i18n是"国际化"的简称,它的主要目的是让应用程序能够适应不同的语言和地区的需求,下面就跟随小编一起来看看Vue中i18n的具体使用方法吧2025-01-01
在本篇文章里小编给大家整理的是一篇关于vue中插槽整理及用法分析内容，对此有兴趣的朋友们可以跟着学习下。2021-12-12
pinia是一个轻量级的状态管理库,属于 vue3 生态圈新的成员之一,下面这篇文章主要给大家介绍了关于Vue项目新一代状态管理工具Pinia的使用教程,需要的朋友可以参考下2022-11-11
最新评论