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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue3+echarts实现好看的圆角环形图
这篇文章主要介绍了vue3+echarts实现好看的圆角环形图效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue/cli3.0脚手架部署到nginx时页面空白的问题及解决
这篇文章主要介绍了vue/cli3.0脚手架部署到nginx时页面空白的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
Vue 用Vant实现时间选择器的示例代码
这篇文章主要介绍了Vue 用Vant实现时间选择器的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10
Vue.js设计与实现分支切换与清除学习总结
这篇文章主要为大家介绍了Vue.js设计与实现分支切换与清除学习总结，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
vuex5中的Pinia插件机制
这篇文章主要介绍了vuex5中的Pinia插件机制，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
Vue使用localStorage存储数据的方法
这篇文章主要为大家详细介绍了Vue使用localStorage存储数据的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-05-05
十分钟带你读懂Vue中的过滤器
过滤器提供给我们的一种数据处理方式。过滤器功能不是必须要使用的，因为它所实现的功能也能用计算属性或者函数调用的方式来实现。这篇文章主要为大家介绍了Vue中过滤器的使用，需要的可以了解一下
2023-03-03
vue项目中按需引入element-ui的正确实现方法
这篇文章主要介绍了vue项目中按需引入element-ui的正确实现方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
vue移动端实现左滑编辑与删除的全过程
vue.js是现在流行的js框架之一,vue 是一套用于构建用户界面的渐进式javascript框架，这篇文章主要给大家介绍了关于vue移动端实现左滑编辑与删除的相关资料,需要的朋友可以参考下
2021-05-05
vue的自定义指令传参方式
这篇文章主要介绍了vue的自定义指令传参方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05