dart-sass和node-sass的区别,使用dart-sass后可能会出现的问题

前言:

2020 年 10 月 27 日,Sass 官方团队正式宣布 Libsass 将弃用,以及基于它的 Node Sass 和 SassC,并且建议用户使用 Dart Sass。如果在 vue 脚手架搭建的项目中需要使用 sass,建议初始化时勾选 sass 配置,自行安装,选择默认的就是 dart-sass。dart-sass 替代 node-sass 根本原因:node-sass 无法下载特定版本的二进制依赖文件(博主没有深入研究)

dart-sass 使用前需要注意几点:

  • dart-sass 和 node-sass 都是用来将 sass 编译成 css 的工具,所以都依赖 sass-loader。但 node-sass 与 node.js 版本相关联,这就导致,一旦本地 node.js 升级,就会出现 node-sass 无法工作的情况

  • npm 上的 dart-sass 包已被弃用,直接更名为 sass

  • dart-sass 不支持/deep/,要改成::v-deep

安装 dart-sass

卸载 node-sass
yarn remove node-sass
安装 dart-sass
yarn add sass -D

dart-sass 与 node-sass 的区别

node-sass 是用 node(调用 cpp 编写的 libsass)来编译 sass
dart-sass 是用 drat VM 来编译 sass
node-sass 是自动编译实时的,dart-sass 需要保存后才会生效
dart-sass 性能更好(也是 sass 官方使用的),而且 node-sass 依赖 node 版本,所以会出很多问题(node-sass:4.14.1,node:14.19.3 可以正常使用,mac 本 node-sass 依赖 python3,装机默认是 python2.7,所以还需要下载 python3)

dart-sass 优势

  • 不存在依赖二进制文件即可完成安装,避免了 node-sass 因为依赖其他文件而失败

  • 允许使用 sass 和 css 新特性

  • 避免工程其他依赖升级的不兼容 node-sass 导致报错的问题

dart-sass 缺陷

  • 性能:由于 node-sass 使用 C++实现的样式预处理器,速度相比于纯 Javascript 实现 Dart Sass 要快

  • 内存:执行编译过程中,Node Sass 的内存占用也比 Dart Sass 要小很多

常出问题

1. Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

问题截图如下:

主要是在写 css 中使用/出的错

css 语法里面已经添加了/作为分隔符的使用。sass 作为 css 的超集,也会跟进这个改动,所以 sass2.0 的时候 /就会被弃用。但是在 calc 函数里面仍然是有效的,也就是说,我们以后用除法的时候,直接在 calc 函数里使用,或者除 2 的时候改成*0.5 就没有问题了。本来 css 就是只在 calc 支持除法,所以问题不大。官方给出的解决办法是 math.div()方法,当然官方不会让你一个一个修改,给出了批量修改工具。

安装 sass-migrator
yarn add -g sass-migrator
批量修改
sass-migrator division **/*.scss
编译之前
margin-right: #{$--tooltip-arrow-size/0.55};
编译之后
margin-right: #{math.div($--tooltip-arrow-size, 0.55)};
2.SassError: expected selector. /deep/
问题截图如下:


在写 css 中使用/deep/出的错,将/deep/替换成::v-deep即可。
3.SassError: expected identifier

问题截图如下:


错误原因应该是不能直接使用小数,transition:all (1.6*0.5)s,有遇到该问题的兄弟可留言,博主目前这么解决的
vue 项目中使用的 element ui 的 icon 乱码,需要在 vue.config.js 中加入以下代码

4.vue 项目中使用的 element ui 的 icon 乱码,需要在 vue.config.js 中加入以下代码

module.exports = {  css: {    loaderOptions: {      sass: {        implementation: require('sass'),        sassOptions: {          // 生效代码          outputStyle: 'expanded'        }      }    }  } }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/1559267.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

前端优化之路:git commit 校验拦截

但是想要做到高效落地执行,就需要做些别的功课,先展示下成果图 需要了解git hooks,它是git的钩子,就像vue拥有自己的钩子一样。 官方文档:https://git-scm.com/docs/githooks 项目安装 husky,建议稳定版本…

patch函数前两个参数位

如我们多了解的,patch函数前两个参数位为 oldVnode 和 Vnode ,分别代表旧节点和新节点,主要做了四个判断: patchVnode主要做了两个判断:

java中Math类和Random类的api

目录 Math 类 1)abs(x) 2)ceil(x) 3)floor(x) 4)round(x) 5)max(x, y) 6)min(x, y) 7)sqrt(x) 8)pow(x, y) 9)random() 10)sin(x), cos(x), tan(x) 11&#x…

购物网站毕业设计-电子电器商城管理系统SpringBootSSM框架开发

目录 1. 系统概述 1.1背景介绍 1.2 课题意义 1.3课题目标 2. 主要功能模块 2.1 前端用户模块 2.2 后端管理模块 2.3 功能图展示 3. 技术选型 3.1 VUE介绍 3.2 JAVA介绍 3.3 MySQL介绍 4. 系统设计 4‌.1数据库设计 5 详细设计 5.1 界面展示 设计一个电子电…

通过Keil5编译软件获取函数最深堆栈

文章目录 1.问题提出2.问题分析3.环境搭建4.解决方案5.经验总结6.疑问 1.问题提出 在编写新软件时,由于某功能需要使用RAM约24KB,而新模块的总RAM是96KB,该某功能一旦开启则需要占用四分之一的RAM空间。为了保证在开启某功能后,新…

WPF中的Window类

控件分类 在第一篇文章.Net Core和WPF介绍中的WPF的功能和特性部分根据功能性介绍了WPF的控件 名称。 在接下来的文章中,将会详细的介绍各个控件的概念及使用。 主要包括: 内容控件:Label、Button、CheckBox、ToggleButton、RadioButton、…

高性能缓存方案 —— Caffeine

一、简介 Caffeine是一个高性能的Java缓存库,它提供了本地缓存的功能。 Caffeine和Redis都是内存级别的缓存,为什么要使用在这两缓存作为二级缓存,它们两有什么区别呢? 虽然它们都是内存级别的缓存,但是Redis是需要单独部署的&…

【开源风云】从若依系列脚手架汲取编程之道(五)

📕开源风云系列 🍊本系列将从开源名将若依出发,探究优质开源项目脚手架汲取编程之道。 🍉从不分离版本开写到前后端分离版,再到微服务版本,乃至其中好玩的一系列增强Plus操作。 🍈希望你具备如下…

鸿蒙OS投票机制

(基于openharmony5.0) 投票机制 param get | grep ohos.boot.time 图 投票机制参数图 只有当所有的投票完成,开机动画才会退出,整理需要投票的系统应用(三方应用不参与投票)如下图所示: 以进程foundation为例&…

Python案例--copy复制

在Python编程中,数据的复制是一个常见且重要的操作,它涉及到赋值、浅拷贝和深拷贝三种不同的概念。正确理解这三种操作对于编写高效且正确的程序至关重要。本文将通过一个简单的Python示例,探讨这三种数据复制方式的区别及其应用场景&#xf…

计算机视觉之OpenCV vs YOLO

好多开发者希望搞明白OpenCV 和YOLO区别,实际上,二者在计算机视觉领域都有广泛应用,但它们有很大的不同。 一、OpenCV 概述 OpenCV(Open Source Computer Vision Library)是一个开源的计算机视觉和机器学习软件库。它…

软考攻略/超详细/系统集成项目管理工程师/基础知识分享12

5.1 软件工程定义(了解) 软件工程是指应用计算机科学、数学及管理科学等原理,其目的是提高软件生产率、提高软件质量、降低软件成本。 5.2 软件需求(掌握) 5.2.1 需求的层次(掌握) 软件需求是指…

打造直播美颜平台的关键技术:视频美颜SDK的深度解析

本篇文章,小编将深入解析视频美颜SDK的关键技术,探讨其在打造直播美颜平台中的作用。 一、视频美颜SDK的定义与功能 视频美颜SDK是一套专门为实时视频处理而设计的软件开发工具包。其主要功能包括人脸检测、肤色美化、瑕疵修复、虚化背景、实时滤镜等。…

chaos官方给的V-Ray材质优化器怎么样?

V-Ray材质优化器是一个为3ds Max设计的MAX脚本,它通过以下方式优化场景,提高渲染速度! V-Ray材质优化器安装包可找【成都渲染101云渲染,云渲码6666】提供! ​ 通过创建一个新的UV通道并使用平面映射算法展开场景对象。…

vue3 vue2

vue3.0是如何变快的? diff算法优化 vue2的虚拟dom是进行全局的对比。vue3 新增了静态标记(patchFlag) 在与上次虚拟节点进行比较的时候,只对比带有patch Flag的节点,并且可以通过flag的信息得知当前节点要对比的具体内…

CRM客户关系管理系统全面解析

CRM(Customer Relationship Management)客户关系管理系统是一种以客户为中心的商业策略和技术框架,旨在通过对客户资料的收集、管理和分析,提升企业的市场竞争力,从而实现业务增长和客户满意度的提高。以下是对CRM系统…

移动美容师是什么?职业前景如何?连锁美业门店管理系统拓客系统Java源码

移动美容师是一种为客户提供上门美容服务的专业人士。与传统美容院或美容店不同,移动美容师可以根据客户的需求和预约,在客户指定的时间和地点进行美容护理、美甲、美发等项目。 这种服务形式为顾客提供了更加便捷、个性化的美容体验,同时也…

华为OD机试 - 采样过滤(Python/JS/C/C++ 2024 E卷 100分)

华为OD机试 2024E卷题库疯狂收录中,刷题点这里 专栏导读 本专栏收录于《华为OD机试真题(Python/JS/C/C)》。 刷的越多,抽中的概率越大,私信哪吒,备注华为OD,加入华为OD刷题交流群,…

YOLO11涨点优化:注意力魔改 | 双重注意力机制DoubleAttention,有效地捕获图像中不同位置和不同特征的重要性

💡💡💡本文改进内容: DoubleAttention该网络结构采用双重注意力机制,包括Spatial Attention和Channel Attention,有效地捕获图像中不同位置和不同特征的重要性 💡💡💡本文改进:分别加入到YOLO11的backbone、neck、detect,助力涨点 改进1结构图: 改进2结构图…

STM32—W25Q64

1.W25Q64简介 W25Oxx系列是一种低成本、小型化、使用简单的非易失性存储器 易失性存储器 般就是SRAM、DRAM等非易失性存储器 般就是E2PROM、Flash等常应用于数据存储、字库存储、固件程序存储等场景存储介质:Nor Flash(闪存)时钟频率:80MHz / 160MHz(…