放弃node-sass,启用sass

2023-11-13

在下载一个新项目时运行:npm run install 发现报错 npm uninstall 异常

Error: Could not find any Visual Studio installation to use
或是
-------------------------
You need to install the latest version of Visual Studio
npm ERR! gyp ERR! find VS including the "Desktop development with C++" workload.
npm ERR! gyp ERR! find VS For more information consult the documentation at:
npm ERR! gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows
---------------------------

运行 npm install --global --production windows-build-tools 在install 如果没有效果,下载 https://visualstudio.microsoft.com/zh-hans/downloads/ 新版 visual studio
目前最新是 visual studio Community 2022 ,勾选c++,安装完成后
在这里插入图片描述
在这里插入图片描述

运行:npm config set msvs_version=2022 重新install 基本上可以成功了。

为什么放弃node-sass,

选择dart-sass的理由 官网

  1. Sass 是一种 CSS 的预编译语言。它提供了 变量(variables)、嵌套(nested rules)、 混合(mixins)、
    函数(functions)等功能,并且完全兼容 CSS 语法。Sass 能够帮助复杂的样式表更有条理, 并且易于
    在项目内部或跨项目共享设计。
  2. 在 v4.3.0之前本项目都是基于node-sass进行构建的,但node-sass底层依赖 libsass,导致很多用户安装
    的特别的困难,尤其是 windows用户,它强制用户在windows环境中必须安装python2和Visual Studio才
    能编译成功。 所以为了解决这个问题,本项目在v4.3.0修改为dart-sass进行构建,它能在保证性能的前
    提下大大简化用户的安装成本。通过这个issue下面相关的评论就可以知道,安装 node-sass 是多么麻烦 的
    一件事。
  3. 这里选择使用dart-sass还有一个更主要的原因,sass官方已经将dart-sass作为未来主要的的开发方向了
    ,有任何新功能它都是会优先支持的,而且它已经在社区里稳定运行了很长的一段时间,基本没有什么
    坑了。dart-sass之所以容易安装,主要是因为它会被编译成纯 js,这样就可以直接在的 node 环境中使用
    。虽然这样它的运行速度会比基于 libsass的慢一些些,但这些速度的差异几乎可以忽略不计。整个社区
    现在都在拥抱dart-sass,我们没有理由拒绝!而且它的确大大简化了用户的安装成本。

不选择node-sass的理由,弃用背景

  1. node-sass在npm安装的时候大概率的会安装出错,或下载时间过长,因此考虑用dart-sass来替换
  2. node-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 因为国情问题经常装不上

dart-sass优势

  • 不存在依赖二进制文件即可完成安装,避免了node-sass因为依赖其他文件而失败
  • 允许使用sass和css新特性
  • 避免工程其他依赖升级的不兼容node-sass导致报错的问题

dart-sass缺陷

  • 性能:由于node-sass使用C++实现的样式预处理器,速度相比于纯Javascript实现Dart Sass要快
  • 内存:执行编译过程中,Node Sass的内存占用也比Dart Sass要小很多

删除node-sass 安装sass

npm install node-sass
npm install sass -D

异常提示:

在这里插入图片描述
nuxt项目异常提示: You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.

解决方案

npm i -D @nuxt/postcss8 @nuxtjs/style-resources

在nuxt.config.js中添加配置

buildModules: [
  '@nuxtjs/style-resources',
  '@nuxt/postcss8',
],
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

放弃node-sass,启用sass 的相关文章

随机推荐

  • 小黄的刷题之路(十七)——码题集OJ赛-循环移位

    文章目录 一 题目 二 分析思路 2 1 审题理解 2 2 思路 三 代码实现 3 1 C 实现 四 总结 一 题目 二 分析思路 2 1 审题理解 给我们一个正整数序列 如果能够通过若干次循环左移调整成一个升序序列 那就输出 YES 否则
  • Unity2D--给动画添加关键帧并绑定事件

    关键帧 一添加关键帧 在Animation面板中添加关键帧 二给关键帧绑定事件 添加关键帧后可以先点击关键帧 然后在Inspector面板中绑定事件 Function为方法名
  • Filter实现权限过滤

    有这么一个简单的要求 用户只有登录才能进入主页 一旦退出就无法进入主页 看似好像生来就该如此但代码层次却不简单 首先要判断用户登录状态 然后拦截判断 后面还会学习拦截器 web文件夹下新建一个文件夹名为sys 该文件夹新建jsp页面名为su
  • Linux 查看磁盘空间

    1 查看当前目录的总大小 du sh ps du disk usage 2 查看某个目录的总大小 du sh 目录名 du后面可以跟的参数含义 a 列出所有的文件与目录容量 因为默认仅统计目录底下的文件量而已 h 以人们较易读的容量格式 G
  • Deep Learning 大体概念和事情

    0 深度学习为什么可能 因为一个事物的发生 其背后总有一个理型 或者叫做规律性 这个规律性就体现在原因与结果的作用关系里 把大多数原因和结果进行量化之后 结果与原因间存在一个数量关系方程 使得 结果 f 众原因 找出来这个大致的方程 f 便
  • 前端 Websocket + Stomp.js 的使用

    什么是Stomp STOMP即Simple or Streaming Text Orientated Messaging Protocol 简单 流 文本定向消息协议 它提供了一个可互操作的连接格式 允许STOMP客户端与任意STOMP消息
  • 【蓝桥OJ——C语言】顺子日期、特殊时间、乘积尾零

    文章目录 顺子日期 特殊时间 乘积尾零 总结 顺子日期 小明特别喜欢顺子 顺子指的就是连续的三个数字 123 456 等 顺子日期指的就是在日期的 yyyymmdd 表示法中 存在任意连续的三位数是一个顺子的日期 例如 20220123 就
  • 【Vue学习笔记】- 模板语法

    Vue模板语法分为两大类 插值语法 指令语法 插值语法 功能 作用于标签体内 目的是解析内容 写法 xxx xxx 是js表达式或data中的数据 指令语法 功能 作用于标签自身 可解析 标签属性 标签体内容 绑定事件 举例 v bind
  • java调第三方接口

    目录 背景 Spring的RestTemplate 1 引入依赖 2 RestTemplate配置类 3 RestTemplate实现类 背景 java调第三方接口我百度的有三种方法 第一种 通过JDK网络类Java net HttpURL
  • SpringBoot jar包的部署方式

    centos版本 CentOS Linux release 7 6 1810 Core JDK1 8 一 SpringBoot jar包的部署方式 nohup 后台进程形式 Linux脚本 启动形式 systemd 优雅系统服务形式 sys
  • Tomcat的日志切分和定时删除

    在我负责的一个小系统中 Linux环境下 由于默认日志都是写入在 cattalina out中 我查看日志catalina out 竟然已经到了 40G了 我想做一下 文件内容检索来追踪问题都无法进行 于是我决定删除以前的无用日志 以每日作
  • Qt 与外部exe进程间通信-基于操作系统的消息传递

    步骤 进程A 通过WindowAPI找到需要传递信息的窗口 然后通过windowAPI发送自定义的消息 其实本质上还是window操作系统定义的消息结构 只不过其中有个字段的值被设置成了自己特有的值 const ULONG PTR CUST
  • Java分割字符串(spilt())

    String 类的 split 方法可以按指定的分割符对目标字符串进行分割 分割后的内容存放在字符串数组中 该方法主要有如下两种重载形式 str split String sign str split String sign int lim
  • 学好了Python可以干什么?

    随着我国对编程的重视程度上升 Python编程的学习趋势逐渐低龄化 在全国掀起Python编程热的同时 还是有许多人对于学习Python抱有怀疑 那么我们就来看看学好了Python究竟可以干什么 根据目前就业市场的反馈 我们可以看到Pyth
  • Cscope的使用

    转载自 http blog csdn net dengxiayehu article details 6330200 首先在目录下建立cscope索引文件 find name c gt cscope file cscope Rbkq 这个命
  • ST芯片使用串口 + DMA接收 + 空闲中断处理,有USART1和LPUART

    普通串口 USART1 首先是DMA初始化 DMA初始化 void MX DMA Init void Init with LL driver DMA controller clock enable LL AHB EnableClock LL
  • 最新淘宝主图下载方法-最新淘宝主图下载工具-马赛克视频助手

    做电商的朋友经常需要去下载淘宝上的别人的主图视频 那么淘宝主图视频怎么下载呢 工具 材料 马赛克视频助手 免费工具 www mask4 com 大家自行下载 操作方法 1 先打开马赛克视频助手 2 随便打开一个淘宝主图地址 如果是手机端的朋
  • ORA-00937: not a single-group group function说明及解决方法

    A SELECT list cannot include both a group function such as AVG COUNT MAX MIN SUM STDDEV or VARIANCE and an individual co
  • uni-app调用手机摄像头进行扫码

  • 放弃node-sass,启用sass

    在下载一个新项目时运行 npm run install 发现报错 npm uninstall 异常 Error Could not find any Visual Studio installation to use 或是 You need