vue3中vite使用sass的配置方法

2024-01-12 09:46:18 作者：waterkid0

这篇文章主要介绍了vue3中vite使用sass的配置方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

vue3+vite使用scss

npm install sass -d

css: {
    preprocessorOptions: {
      scss: {
        additionalData:'@import "@/assets/styles/main.scss";'
      }
    }
  },

$blue: #3385ff

扩展：

进入项目目录直接npm安装即可，不用繁琐的各种配置

npm install --save-dev sass

如果安装了，但是运行vite启动项目依旧出现报错，请检查package.json文件中，sass是不是在依赖配置中，把他移动到开发依赖中即可，一般为安装sass的时候npm没有加–save-dev所导致的。

打开vite的配置文件，在里面加入css的配置即可

cssPreprocessOptions: {
   scss: {
      additionalData: '@import "./src//scss/common.scss";' // 全局公共样式
   }
}

这是由于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中vite使用sass的文章就介绍到这了,更多相关vue3使用sass内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！