0
点赞
收藏
分享

微信扫一扫

vue3+vite应用中添加sass预处理器

冬冬_79d4 2022-02-23 阅读 413

一、如何安装

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

npm install --save-dev sass

二、加入全局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)

举报

相关推荐

0 条评论