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'        }      }    }  } }

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

扫雷(C 语言)

目录 一、游戏设计分析二、各个步骤的代码实现1. 游戏菜单界面的实现2. 游戏初始化3. 开始扫雷 三、完整代码四、总结 一、游戏设计分析 本次设计的扫雷游戏是展示一个 9 * 9 的棋盘,然后输入坐标进行判断,若是雷,则游戏结束,否则…

Redis拒绝连接问题分析与解决方案

目录 前言1. 问题描述2. Redis拒绝连接的常见原因分析2.1 Redis服务未启动2.2 Redis配置中的绑定地址问题2.3 防火墙或安全组问题2.4 Redis连接池耗尽2.5 Redis服务器负载过高2.6 权限配置问题 3. 深度解决方案和优化建议4. 总结 前言 在分布式系统中,Redis作为高性…

Unity之XR Interaction Toolkit 射线拖拽3DUI

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、想实现的功能二、实现原理1.UI挂在XRGrabInteractable、刚体、BoxCollder2.修改刚体属性3.加BoxCollder 总结 前言 VR项目里正常情况有放置两种3DUI的方式…

Git之代已修改文件的目录高亮设置

不管Android Studio或者Idea,进入Setting 选择如图所示,并进行勾选 就可以高亮了。

2023年10月自考《数据库系统原理》04735试题

目录 一.选择题 二.填空题 三.设计题 四.简答题 五.综合体 一.选择题 1.下列属于数据库中存储数据基本特点是 (书中)P28页 A.冗余大 B.无组织 C.不可共享 D.永久存储 2.浏览器/服务器结构描述不正确的是 (书中)P36页 A.三层客户/服务器结构 B.基于Web引用的客户/服务器…

AWD入门

一、简介 AWD(Attack With Defense,攻防兼备)模式。你需要在一场比赛里要扮演攻击方和防守方,攻者得分,失守者会被扣分。也就是说攻击别人的靶机可以获取 Flag 分数时,别人会被扣分,同时你也要保护自己的主机不被别人…

武汉正向科技|焦炉移动机车连锁控制系统的介绍

焦炉车辆连锁控制系统是采用格雷母线定位技术,无线数据传输技术以及计算机技术,实现推焦车、拦焦车、熄焦车、装煤车、导烟车的集中监控和系统管理,以及车间作业计划管理,作业实绩管理,作业联锁控制及安全控制等。 焦炉…

Unlock the Power of Frozen LLMs in Knowledge Graph Completion

文章目录 题目摘要引言方法实验相关工作结论局限性附录 题目 在知识图完成中释放冻结LLM的力量 论文地址:https://arxiv.org/abs/2408.06787 摘要 传统的知识图完成(KGC)方法仅仅依赖于结构信息,难以克服知识图固有的稀疏性。大型语言模型(LLM)通过强大…

3dsMax添加天空盒

点击渲染,环境 , 点击位图 找到要设置的天空HDR,可以使用HDR(EXR)贴图 一个可以下载HDR贴图的网站 https://polyhaven.com/hdris在渲染的时候不要使用使用微软输入法,3dsmax会卡死, 在渲染的时候不要使用使用微软…

2013年国赛高教杯数学建模D题公共自行车服务系统解题全过程文档及程序

2013年国赛高教杯数学建模 D题 公共自行车服务系统 公共自行车作为一种低碳、环保、节能、健康的出行方式,正在全国许多城市迅速推广与普及。在公共自行车服务系统中,自行车租赁的站点位置及各站点自行车锁桩和自行车数量的配置,对系统的运行…

MySQL 9从入门到性能优化-二进制日志

【图书推荐】《MySQL 9从入门到性能优化(视频教学版)》-CSDN博客 《MySQL 9从入门到性能优化(视频教学版)(数据库技术丛书)》(王英英)【摘要 书评 试读】- 京东图书 (jd.com) MySQL9数据库技术_夏天又到了…

python车牌号OCR识别(centos版)

在实际应用中,车牌号的识别(OCR)是一个非常重要的需求,尤其是在停车场管理、道路监控等场景中。本文将介绍如何在CentOS环境下,通过Docker容器,基于PaddleOCR来实现车牌号的识别。具体内容包括构建Docker镜像的步骤、相关依赖安装…

antd vue 输入框高亮设置关键字

<highlight-textareaplaceholder"请输入主诉"type"textarea"v-model"formModel.mainSuit":highlightKey"schema.componentProps.highlightKey"></highlight-textarea> 参考链接原生input&#xff0c;textarea demo地址 …

网站建设为什么要选择国内服务器

选择国内服务器进行网站建设&#xff0c;对于面向国内用户的企业来说&#xff0c;是一个明智的决策。以下是一些选择国内服务器的主要原因&#xff1a; 提升用户体验&#xff1a; 网站访问速度是用户体验的关键因素之一。由于物理距离较近&#xff0c;国内服务器通常能提供更快…

Linux_进程概念详解(续)_命令行参数_环境变量_进程地址空间

本篇文章是Linux_进程概念详解的续篇&#xff0c;请先阅读Linux_进程概念详解再来阅读本篇。 命令行参数 在C / C中&#xff0c;每个程序都必须有一个main函数&#xff0c;该函数有很多的版本&#xff0c;我们最常用的就是不带参数的版本&#xff0c;也就是下面第一条语句 i…

关于 文件操作详解 笔记 (含代码解析)

文件 磁盘&#xff08;硬盘&#xff09;上的⽂件是⽂件。 程序设计中&#xff0c;我们⼀般谈的⽂件有两种&#xff1a;程序⽂件、数据⽂件&#xff08;从⽂件功能的⻆度来分类 &#xff09; 程序⽂件 程序⽂件包括源程序⽂件&#xff08;后缀为.c&#xff09;,⽬标⽂件&#…

【测试】BUG篇——BUG

bug的概念 定义&#xff1a;⼀个计算机bug指在计算机程序中存在的⼀个错误(error)、缺陷(flaw)、疏忽(mistake)或者故障(fault)&#xff0c;这些bug使程序⽆法正确的运⾏。Bug产⽣于程序的源代码或者程序设计阶段的疏忽或者错误。 准确的来说&#xff1a; 当且仅当规格说明&am…

项目_C_Ncurses_Flappy bird小游戏

Ncurses库 概述 什么是Ncurses库&#xff1a; Ncurses是一个管理应用程序在字符终端显示的函数库&#xff0c;库中提供了创建窗口界面、移动光标、产生颜色、处理键盘按键等功能。 安装Ncurses库&#xff1a; sudo apt-get install libncurses5-dev 头文件与编译&#xf…

老人桌面 1.3.5|专为老人设计的便捷实用桌面应用

老人桌面是一款专为老人设计的便捷实用桌面应用&#xff0c;具有超大字体设计&#xff0c;符合老人视力水平&#xff0c;撞色简洁的应用界面&#xff0c;拯救老人视觉体验。此外&#xff0c;还提供了常用的实用小工具&#xff0c;让老人能够轻松使用手机。 大小&#xff1a;5.…

Oracle-19g数据库的安装

简介 Oracle是一家全球领先的数据库和云解决方案提供商。他们提供了一套完整的技术和产品&#xff0c;包括数据库管理系统、企业级应用程序、人工智能和机器学习工具等。Oracle的数据库管理系统是业界最受欢迎和广泛使用的数据库之一&#xff0c;它可以管理和存储大量结构化和…