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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue使用element-ui按需引入时踩过的那些坑
Element-UI是基于vue实现的一套不依赖业务的UI组件库,提供了丰富的PC端组件,减少用户对常用组件的封装,降低了开发的难易程度,下面这篇文章主要给大家介绍了关于vue使用element-ui按需引入时踩过的那些坑,需要的朋友可以参考下
2022-05-05
vue-cli3 项目从搭建优化到docker部署的方法
这篇文章主要介绍了vue-cli3 项目从搭建优化到docker部署的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
Vue2+ElementUI表单、Form组件的封装过程
在 Vue2 项目中,ElementUI 的 el-form 组件是常用的表单组件,它提供了丰富的功能和样式,可以满足各种需求,本文给大家介绍Vue2+ElementUI表单、Form组件的封装过程,感兴趣的朋友跟随小编一起看看吧
2024-03-03
Vue.js每天必学之计算属性computed与$watch
Vue.js每天必学之计算属性computed与$watch，为大家详细讲解计算属性computed与$watch，感兴趣的小伙伴们可以参考一下
2016-09-09
解决在vue的mounted中获取对象为null问题
这篇文章主要介绍了解决在vue的mounted中获取对象为null问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
基于Vue技术实现递归组件的方法
这篇文章主要为大家详细介绍了基于Vue技术实现递归组件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
Vue Echarts实现柱形图从右向左滚动效果
这篇文章主要为大家详细介绍了Vue如何利用Echarts实现柱形图从右向左滚动的效果，文中的示例代码简洁易懂，感兴趣的小伙伴可以跟随小编一起学习一下
2023-05-05
Vite3结合Svelte3使用@import导入scss样式
这篇文章主要为大家介绍了Vite3结合Svelte3使用@import导入scss样式实现实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
vuex的简单使用教程
vuex是一个专门为vue.js设计的集中式状态管理架构。这篇文章主要介绍了vuex的简单使用,需要的朋友可以参考下
2018-02-02
一文带你上手vue3中的pinia
这篇文章主要以vue3+vite+ts举例,为大家详细介绍了vue3中pinia的安装与使用,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2023-09-09