vue node node-sass sass-loader 版本 对应 与 兼容

        警告: LibSass 和 Node Sass 已弃用。虽然它们将继续无限期地接收维护版本,但没有计划添加其他功能或与任何新的 CSS 或 Sass 功能兼容。仍在使用它的项目应该转移到 Dart Sass。 

sass
        Sass是一种预处理器脚本语言,可以解释或编译成层叠样式表(CSS)。

        Sass包含两种语法:较旧的语法使用缩进将代码块和换行符分隔为单独的规则;较新的语法SCSS使用像CSS这样的块格式。它使用大括号来表示代码块和分号来分隔块中的行。

        缩进语法和SCSS文件传统上分别给出扩展名.sass和.scss

node-sass
        Node-sass是一个库,它将Node.js绑定到LibSass(流行样式表预处理器Sass的C版本)。它允许用户以令人难以置信的速度将.scss文件本地编译为css,并通过连接中间件自动编译。

sass-loader
        sass-loader 是一个webpack 的loader,用于处理项目中的Sass/SCSS 文件。 它的作用是将Sass/SCSS 代码转换成CSS 代码,并将其注入到应用程序中。

兼容问题
        在安装node-sass的过程中,经常会出现兼容问题,导致安装失败,通常是由于node版本、node-sass版本、sass-loader版本不对应导致。
下面是一些推荐的版本对应规则:

首先是node和node-sass的版本对应规则:node-sass - npm 

NodeJSSupported node-sass versionNode Module
Node 209.0+115
Node 198.0+111
Node 188.0+108
Node 177.0+, <8.0102
Node 166.0+93
Node 155.0+, <7.088
Node 144.14+, <9.083
Node 134.13+, <5.079
Node 124.12+, <8.072
Node 114.10+, <5.067
Node 104.9+, <6.064
Node 84.5.3+, <5.057
Node <8<5.0<57

然后是node-sass和sass-loader的对应规则:

sass-loader 4.1.1,node-sass 4.3.0
sass-loader 7.0.3,node-sass 4.7.2
sass-loader 7.3.1,node-sass 4.7.2
sass-loader 7.3.1,node-sass 4.14.1
sass-loader 10.0.1,node-sass 6.0.1

        上面是部分对应规则,首先根据node版本确定好node-sass的版本,然后再选择sass-loader的版本。

        同时上面只是一部分sass-loader的版本对应,因为没有提供官方的对应规则,所以上面的版本还是不对的话,确定好node和node-sass版本之后,可以一个一个尝试sass-loader的版本,所有版本:sass-loader - npm

其它说明

        出现兼容问题的主要原因在于,早期开发人员使用比如node12版本,安装node-sass4+版本和sass-loader4+,可以正常运行,但是后期开发人员使用了更新的node,比如16,而16不支持低版本node-sass。

        同时即便切换到低版本node12中可以正常运行,但项目中使用了一些node12以上的代码语法,比如node14才支持的可选链语法,然后其它开发人员拉代码之后,就要么高版本node无法拉取node-sass包,要么切换低版本无法运行一些高版本node才支持的语法。
推荐还是使用高版本的node,然后升级node-sass和sass-loader版本。

其它方法

        直接放弃node-sass,使用dart-sass无缝替换。

node-sass与dart-sass区别:

node-sass 是用 node (调用 cpp 编写的 libsass) 来编译 sass。

dart-sass 是用 drat VM 来编译 sass。

node-sass 是实时自动编译的,dart-sass 需要保存后才会生效。

推荐 dart-sass 性能更好(也是 sass 官方使用的),除了上面的版本对应不上,很多时候node-

sass还因为国情问题经常装不上。

下面是切换方法,使用高版本node,然后根据下面操作:

1、卸载 node-sass

        npm uninstall node-sass

2、安装 dart sass

        npm install sass sass-loader -D

3、替换

        将项目中原有的 /deep/ 替换为::v-deep,也就这一步麻烦一些,具体需要个人评估。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java—反射机制详解

介绍反射 反射的基本概念 反射&#xff08;Reflection&#xff09;是Java语言中的一种机制&#xff0c;它允许程序在运行时检查和操作类、接口、字段和方法等类的内部结构。通过反射&#xff0c;你可以在运行时获取类的信息&#xff0c;包括类的构造器、字段、方法等&#xf…

在 Windows 上运行 Vue 项目时解决 ‘NODE_OPTIONS‘ 错误

在 Windows 上运行 Vue 项目时解决 ‘NODE_OPTIONS’ 错误 在 Windows 系统上启动 Vue 项目时&#xff0c;遭遇报错。具体报错信息如下&#xff1a; ‘NODE_OPTIONS‘ 不是内部或外部命令&#xff0c;也不是可运行的程序或批处理文件。这个错误通常意味着 Windows 系统无法识…

机器翻译之创建Seq2Seq的编码器、解码器

1.创建编码器、解码器的基类 1.1创建编码器的基类 from torch import nn#构建编码器的基类 class Encoder(nn.Module): #继承父类nn.Moduledef __init__(self, **kwargs): #**kwargs&#xff1a;不定常的关键字参数super().__init__(**kwargs)def forward(self, X, *args…

基于SpringBoot+Vue+MySQL的美食点餐管理系统

系统展示 用户前台界面 管理员后台界面 系统背景 在数字化快速发展的今天&#xff0c;餐饮行业也迎来了转型升级的重要机遇。传统餐饮管理方式面临效率低下、顾客体验不佳等问题。为此&#xff0c;开发一款基于SpringBootVueMySQL架构的美食点餐管理系统显得尤为重要。该系统旨…

【可图(Kolors)部署与使用】大规模文本到图像生成模型部署与使用教程

✨ Blog’s 主页: 白乐天_ξ( ✿&#xff1e;◡❛) &#x1f308; 个人Motto&#xff1a;他强任他强&#xff0c;清风拂山冈&#xff01; &#x1f4ab; 欢迎来到我的学习笔记&#xff01; 1.Kolors 简介 1.1.什么是Kolors&#xff1f; 开发团队 Kolors 是由快手 Kolors 团队…

网页护眼宝——全方位解析 Chrome Dark Reader 插件

网页护眼宝——全方位解析 Chrome Dark Reader 插件 1. 基本介绍&#xff1a;Chrome 插件的力量与 Dark Reader 的独特之处 随着现代浏览器的功能越来越强大&#xff0c;Chrome 插件为用户提供了极大的定制化能力。从广告屏蔽、性能优化到页面翻译&#xff0c;Chrome 插件几乎…

视频监控相关笔记

一、QT 之 QTreeWidget 树形控件 Qt编程指南&#xff0c;Qt新手教程&#xff0c;Qt Programming Guide 一个树形结构的节点中的图表文本 、附带数据的添加&#xff1a; QTreeWidgetItem* TourTreeWnd::InsertNode(NetNodeInfo node, QTreeWidgetItem* parent_item) { // …

C++: unordered系列关联式容器

目录 1. unordered系列关联式容器1.1 unordered_map1.2 unordered_set 2. 哈希概念3. 哈希冲突4. 闭散列5. 开散列 博客主页: 酷酷学 感谢关注!!! 正文开始 1. unordered系列关联式容器 在C98中&#xff0c;STL提供了底层为红黑树结构的一系列关联式容器&#xff0c;在查询时…

2024 天池云原生编程挑战赛决赛名单出炉,冠军来自中山大学、昆仑数智战队

9 月 20 日&#xff0c;2024 天池云原生编程挑战赛决赛答辩完美落幕&#xff0c;12 支进入决赛的团队用精彩的答辩&#xff0c;为历时 3 个月的大赛画下了圆满的句号。其中&#xff0c;来自中山大学的陈泓仰以及来自昆仑数智的冉旭欣、沈鑫糠、武鹏鹏&#xff0c; 以出色的方案…

[深度学习]神经网络

1 人工神经网络 全连接神经网络 2 激活函数 隐藏层激活函数由人决定输出层激活函数由解决的任务决定: 二分类:sigmoid多分类:softmax回归:不加激活(恒等激活identify)2.1 sigmoid激活函数 x为加权和小于-6或者大于6,梯度接近于0,会出现梯度消失的问题即使取值 [-6,6] ,…

乌克兰因安全风险首次禁用Telegram

据BleepingComputer消息&#xff0c;乌克兰国家网络安全协调中心 &#xff08;NCCC&#xff09; 以国家安全为由&#xff0c;已下令限制在政府机构、军事单位和关键基础设施内使用 Telegram 消息应用程序。 这一消息通过NCCC的官方 Facebook 账号对外发布&#xff0c;在公告中乌…

kubernetes网络(二)之bird实现节点间BGP互联的实验

摘要 上一篇文章中我们学习了calico的原理&#xff0c;kubernetes中的node节点&#xff0c;利用 calico 的 bird 程序相互学习路由&#xff0c;为了加深对 bird 程序的认识&#xff0c;本文我们将使用bird进行实验&#xff0c;实验中实现了BGP FULL MESH模式让宿主相互学习到对…

AI大模型日报#0923:李飞飞创业之后首个专访、华为云+腾讯音乐发布昇腾适配方案

导读&#xff1a;AI大模型日报&#xff0c;爬虫LLM自动生成&#xff0c;一文览尽每日AI大模型要点资讯&#xff01;目前采用“文心一言”&#xff08;ERNIE-4.0-8K-latest&#xff09;、“智谱AI”&#xff08;glm-4-0520&#xff09;生成了今日要点以及每条资讯的摘要。欢迎阅…

深兰科技陈海波应邀出席2024长三角论坛暨虹桥人才创新发展大会

近日&#xff0c;以“人才引领 联动共融——国际化创新与长三角协同”为主题的“2024长三角人才发展论坛暨虹桥人才创新发展大会”在上海国际会议中心隆重举行。上海市委常委、组织部部长、市委人才办主任张为应邀出席并做大会致辞。 深兰科技创始人、董事长陈海波作为特邀企业…

数据结构强化(直播课)

应用题真题分析&备考指南 (三)线性表的应用 (六)栈、队列和数组的应用 &#xff08;四&#xff09;树与二叉树的应用 1.哈夫曼&#xff08;Huffman&#xff09;树和哈夫曼编码 2.并查集及其应用&#xff08;重要&#xff09; &#xff08;四&#xff09;图的基本应用 …

计算机组成原理(笔记4)

定点加减法运算 补码加法&#xff1a; 补码减法&#xff1a; 求补公式&#xff1a; 溢出的概念 在定点小数机器中,数的表示范围为|&#xff58;|<1。在运算过程中如出现大于1的现象,称为 “溢出”。 上溢&#xff1a;两个正数相加&#xff0c;结果大于机器所能表示的最…

【算法】堆与优先级队列

【ps】本篇有 4 道 leetcode OJ。 目录 一、算法简介 二、相关例题 1&#xff09;最后一块石头的重量 .1- 题目解析 .2- 代码编写 2&#xff09;数据流中的第 K 大元素 .1- 题目解析 .2- 代码编写 3&#xff09;前K个高频单词 .1- 题目解析 .2- 代码编写 4&#xf…

d2l | 目标检测数据集:RuntimeError: No such operator image::read_file

目录 1 存在的问题2 可能的解决方案3 最终的解决方案3.1 方案一&#xff08;我已弃用&#xff09;3.2 方案二&#xff08;基于方案一&#xff09; 1 存在的问题 李沐老师提供的读取香蕉数据集的函数如下&#xff1a; def read_data_bananas(is_trainTrue):""…

yolov10算法原理

文章目录 1. 模型效果2. 模型特点2.1 无NMS训练的一致性双重分配策略 (Consistent Dual Assignments for NMS-free Training)双重标签分配 (Dual Label Assignments)一致匹配度量&#xff08;Consistent Match. Metric&#xff09;一对一分配在一对多结果中的频率 2.2. 效率-准…

C++基础:第一个C++程序

初学C #include<iostream> int main() {std::cout << "Enter two numbers:" << std::endl;int v1 0, v2 0;std::cin >> v1 >> v2;std::cout << "The sum of "<< v1 << " and " << v2&…