放弃node-sass,启用sass

news2024/11/18 5:34:25

在下载一个新项目时运行: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',
],

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

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

相关文章

嵌入式Linux(二十四)系统烧写

将uboot,linux kernel,.dtb,rootfs烧写到板子上的EMMC上,避免断网导致不能运行。 1. MfgTool工具介绍 一路解压之后,得到以下两项: ①Profiles文件夹:后续烧写文件放到这个文件夹。  其中关注…

宝塔+docker+jenkins部署vue项目(保姆级教程)

1.使用宝塔安装docker 在软件商城安装Docker管理器 2.使用docker下载jenkins镜像 使用命令行 docker pull jenkins/jenkins:lts //lts表示支持版本较长3.创建并且挂载jenkins目录并赋值 jenkins_home为我创建的目录 可以修改任意目录 mkdir -p /jenkins_home cho…

pytest测试框架——allure报告

文章目录一、allure的介绍二、allure的运行方式三、allure报告的生成方式一、在线报告、会直接打开默认浏览器展示当前报告方式二、静态资源文件报告(带index.html、css、js等文件),需要将报告布置到web服务器上。四、allure中装饰器1、实现给…

【LeetCode每日一题:982. 按位与为零的三元组+从递归超时到记忆化搜索】

题目描述 给你一个整数数组 nums &#xff0c;返回其中 按位与三元组 的数目。 按位与三元组 是由下标 (i, j, k) 组成的三元组&#xff0c;并满足下述全部条件&#xff1a; 0 < i < nums.length 0 < j < nums.length 0 < k < nums.length nums[i] & …

Common API环境部署(保姆级教程,填充了很多坑)

Common API环境部署目录一、前言及结果展示二、Windows下安装docker1. 准备工作[1.1 Docker安装包](https://desktop.docker.com/win/main/amd64/Docker%20Desktop%20Installer.exe)[1.2 Wsl2安装包](https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.ms…

【数据结构】链式二叉树

前言 在前面我们学习了一些二叉树的基本知识&#xff0c;了解了它的结构以及一些性质&#xff0c;我们还用数组来模拟二叉树建立了堆&#xff0c;并学习了堆排序&#xff0c;可是数组结构的二叉树有很大的局限性&#xff0c;平常我们用的最多树结构的还是链式二叉树&#xff0c…

【自律】学习方案

自律来源 轶事 陆奇以精力旺盛著称&#xff0c;通常凌晨4点起床&#xff0c;先查邮件&#xff0c;然后在跑步机上跑4英里&#xff0c;边跑边听古典音乐或看新闻。早上5点至6点至办公室&#xff0c;利用这段时间不受别人干扰准备一天的工作&#xff0c;然后一直工作到晚上10点&a…

搜索引擎的设计与实现

技术&#xff1a;Java、JSP等摘要&#xff1a;随着互联网的快速发展&#xff0c;网络上的数据也随着爆炸式地增长。如何最快速筛选出对我们有用的信息成了主要问题。搜索引擎是指根据一定的策略、运用特定的计算机程序从互联网上搜集信息&#xff0c;在对信息进行组织和处理后&…

ks通过恶意低绩效来变相裁员(五)绩效申诉就是「小六自证吃了一碗凉粉」

目录 一、小六吃了一碗凉粉 二、给你差绩效 公司告诉你可以绩效申诉 1、公司的实际目的是啥 2、你一旦自证&#xff0c;就掉入了陷阱 三、谁主张谁举证——让公司证明它绩效考核的客观性和公平性 四、针对公司的流氓恶意绩效行为&#xff0c;还有其他招吗 五、当公司用各…

学习方法--找书,背书,利器

学习方法 前言&#xff1a; 1、所谓的技术/技能&#xff0c;可比作对一类书的学习&#xff0c;那么第一步&#xff0c;就是要找这方面的书本来学习&#xff0c;简称为“找书”&#xff0c;找书既是指资料&#xff0c;也是指经验总结等等&#xff0c;第二步&#xff0c;就是背下…

【基础算法】双指针---数组元素的目标和

&#x1f339;作者:云小逸 &#x1f4dd;个人主页:云小逸的主页 &#x1f4dd;Github:云小逸的Github &#x1f91f;motto:要敢于一个人默默的面对自己&#xff0c;强大自己才是核心。不要等到什么都没有了&#xff0c;才下定决心去做。种一颗树&#xff0c;最好的时间是十年前…

CSS 基础:选择器、盒模型、布局

CSS&#xff08;Cascading Style Sheets&#xff09;是用于定义 HTML 或 XML 文档中的样式的一种语言。它可以控制网页的排版、字体、颜色、背景等多个方面&#xff0c;从而使网页呈现出美观的视觉效果和良好的用户体验。其中&#xff0c;选择器、盒模型和布局是 CSS 基础中的三…

Pod控制器

一.Pod控制器及其功用Pod控制器&#xff0c;又称之为工作负载&#xff08;workload&#xff09;&#xff0c;是用于实现管理pod的中间层&#xff0c;确保pod资源符合预期的状态&#xff0c;pod的资源出现故障时&#xff0c;会尝试进行重启&#xff0c;当根据重启策略无效&#…

C. Zero Path

给你一个矩阵&#xff0c;矩阵中每个点是1或者-1&#xff0c;问你是否存在一条路径从左上角到右下角路径上所经过点的总和是0。 类似于数字三角型&#xff0c;dp[i][j]可以用dp[i-1][j]的位置 和 dp[i][j-1]的位置传递过来&#xff0c;我们可以保存每个位置可以达成的和的所有可…

ROS小车研究笔记3/4/2023:自动导航launch文件解析

对于ROS小车导航算法基本原理和使用方法&#xff0c;可以看笔记http://t.csdn.cn/NUWHt 1 启动小车导航节点&#xff1a;turn_on_wheeltec_robot navigation.launch <launch><!-- 开启机器人底层相关节点 同时开启导航功能--><include file"$(find turn_on…

P6专题:如何通过P6 Professional创建及管理 EPS

目录 引言 创建EPS 引言 牢记P6数据结构&#xff0c;这是P6编制计划的层次&#xff1a;EPS-项目-WBS-作业。 EPS&#xff08;Enterprise Breakdown Structure&#xff09;&#xff1a;企业项目结构&#xff0c;用于组织项目&#xff0c;并进行数据汇总。EPS 代表 Primavera…

XFI和SFI的差异

目录 相同/相似点 应用参考模型 Trace Length 不同点 眼图模板 B点处的眼图模板对比 C点处的眼图模板对比 通道损耗 CDR支持 预加重和均衡 DC特性 RETIMER的用法 通过研究INF-8077i 10 Gigabit Small Form Factor Pluggable Module规范和SFF-8431 Specifications for …

【STM32】入门(十四):FreeRTOS-任务

1、简述 FreeRTOS应用程序由一组独立的任务构成。 在任何时间点&#xff0c;应用程序中只能执行一个任务&#xff0c;FreeRTOS调度器负责决定所要执行的任务。 每个任务在自己的上下文中执行&#xff0c;不依赖于系统内的其他任务或 FreeRTOS的调度器本身。 FreeRTOS调度器负责…

51单片机IIC时序详细分析并驱动EEPROM存储方案应用------day9

51单片机IIC驱动EEPROM存储方案应用------day9 1.常见存储器件&#xff1a; 铁电&#xff0c; E2PROM&#xff0c; FLASH。 共同特点&#xff1a; 掉电后数据不丢失 各自特点&#xff1a; 铁电&#xff1a; 理论上可以无限次擦写&#xff0c; 操作简单&#xff0c; 但是容量小。…

进销存管理系统

技术&#xff1a;Java等摘要&#xff1a;进销存管理系统是为了实现企业仓库商品管理的系统化、规范化和自动化&#xff0c;从而提高企业管理效率而设计开发的管理信息系统。它完全取代了过去一直用人工管理的工作方式&#xff0c;避免了由于管理人员手工操作上的疏忽以及管理质…