放弃node-sass,启用sass
在下载一个新项目时运行: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的理由 官网
- Sass 是一种 CSS 的预编译语言。它提供了 变量(variables)、嵌套(nested rules)、 混合(mixins)、
函数(functions)等功能,并且完全兼容 CSS 语法。Sass 能够帮助复杂的样式表更有条理, 并且易于
在项目内部或跨项目共享设计。 - 在 v4.3.0之前本项目都是基于node-sass进行构建的,但node-sass底层依赖 libsass,导致很多用户安装
的特别的困难,尤其是 windows用户,它强制用户在windows环境中必须安装python2和Visual Studio才
能编译成功。 所以为了解决这个问题,本项目在v4.3.0修改为dart-sass进行构建,它能在保证性能的前
提下大大简化用户的安装成本。通过这个issue下面相关的评论就可以知道,安装 node-sass 是多么麻烦 的
一件事。 - 这里选择使用dart-sass还有一个更主要的原因,sass官方已经将dart-sass作为未来主要的的开发方向了
,有任何新功能它都是会优先支持的,而且它已经在社区里稳定运行了很长的一段时间,基本没有什么
坑了。dart-sass之所以容易安装,主要是因为它会被编译成纯 js,这样就可以直接在的 node 环境中使用
。虽然这样它的运行速度会比基于 libsass的慢一些些,但这些速度的差异几乎可以忽略不计。整个社区
现在都在拥抱dart-sass,我们没有理由拒绝!而且它的确大大简化了用户的安装成本。
不选择node-sass的理由,弃用背景
- node-sass在npm安装的时候大概率的会安装出错,或下载时间过长,因此考虑用dart-sass来替换
- 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',
],
放弃node-sass,启用sass相关推荐
- 下载Node.js和Node.js软件+Sass结合学习代码
一.Sass是什么? 产生原因:在学习Sass之前,首先了解一下原生CSS语言,CSS仅仅是一个标记语言,不是编程语言,因此不可以自定义变量,也不可以引用.CSS主要有以下缺点. CSS是一门非程序式 ...
- 入门到放弃node系列之网络模块(二)
为什么80%的码农都做不了架构师?>>> 前言 本文首发[一名打字员] 上一节我们刚刚介绍完node的HTTP和HTTPS模块,相信我们也对nodejs有了更深层次的理解,接下 ...
- 【sass】Sass教程
Sass 是层叠样式表,Sass 是一个 CSS 预处理器.Sass 是 CSS 扩展语言,可以帮助我们减少 CSS 重复的代码,节省开发时间.Sass 完全兼容所有版本的 CSS.Sass 扩展了 ...
- sass node-sass sass loader
太难了,两天没有学习了,这个问题卡了很久,差点就放弃了,今天终于解决了,继续学习Vue! 报错信息1: ERROR Failed to compile with 6 errors 7:45:21 PM ...
- 入门到放弃node系列之网络模块(一)
前言 本文首发公众号[一名打字员] 上一次相信大家都基本了解node的用法了,有做功课的童鞋肯定回去温习了一下js的语法.这些年来js发展很快,出了很多类似许多vue.react.node等等众所周知 ...
- node 环境 启用 ES2015导入功能
在Node.js中使用原生的ES2015导入功能 如果能在Node.js中使用原生的ES2015导入功能,而不用转译的话就更好了.从Node 8.5版本开始,可以将ES2015导入作为实验功能来开启. ...
- node新版本的坑--与sass的兼容问题
npm ERR! code 1 npm ERR! path C:\Users\HZY\Desktop\wechat-master\chatClient\node_modules\node-sass n ...
- 浅谈node环境下的Sass以及gulp工具下的Sass
目录 一.Sass简介 二.Sass的解析器 1. node环境下的Sass解析器 2. gulp工具下的Sass解析器 三.Sass语法 1. 注释 2. 变量 3.嵌套 4.导入@import 5 ...
- 前端自动化之sass实时编译及自动刷新浏览器
gulp livereload实现sass实时编译及浏览器自动刷新 首先gulp是基于Node的,所以确保你已经安装 node.js,在Nodejs官方网站下载跟自己操作系统相对应的安装包. 先说一下 ...
最新文章
- python使用matplotlib可视化、查看matplotlib可视化中不同字体形式、不同字号、斜体可视化的效果对比
- 我是如何在阿里巴巴面试中壮烈牺牲的?(内含面试题)
- hive 字符串替换指定字符_hive学习笔记:substr()——字符串截取
- 谷歌浏览器如何将繁体字设置成中文?
- 复习上学期的HTML CSS(1)
- 【Python3网络爬虫开发实战】4-解析库的使用-3 使用pyquery
- python ThreadPoolExecutor线程池(实例)
- (51)FPGA条件选择(case)
- aws rds恢复数据库_使用AWS Glue将数据从AWS S3加载到AWS RDS SQL Server数据库
- 最长反链(bzoj 1143: [CTSC2008]祭祀river)
- 软工第一次个人作业博客(一)
- ​Flink 流处理在中信建投证券的实践与应用
- MySQL使用简单教程
- 串口通信协议之SPI通信协议
- 驾培行业现状改革创新探索互联网+品牌服务模式
- Windows Server 2022 英文版、简体中文版下载 (updated Dec 2021)(2022 年 1 月发布)
- multipartfile转excel_MultipartFile解析Excel
- word转换为html代码,如何将Word转换为网页html格式的方法(附代码清理方法)
- IBM结盟飞康VTL提供高性能备份与重复数据删除
- Category 的理解