React安装node-sass失败解决方案分享

 更新时间:2022年11月28日 10:05:13   作者:小刘先生很努力  
Node-sass是一个库,它将Node.js绑定到LibSass(流行样式表预处理器Sass的C版本),它允许用户以令人难以置信的速度将.scss文件本地编译为css,并通过连接中间件自动编译,下面这篇文章主要给大家介绍了关于React安装node-sass失败解决的相关资料,需要的朋友可以参考下

最近发现困扰我的sass终于解决了

第一种:修改源地址

在项目的根路径中添加.npmrc文件,在这个文件中增加以下内容:

sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
registry=https://registry.npm.taobao.org
但是我没用这种方法,我用的第二种,亲测有效哦!!!

第二种:使用sass(dart-sass)代替node-sass

Dart Sass 是 Sass 的主要实现版本,这意味着它集成新功能要早于任何其它的实现版本。

dart-sass已经改名了,在npm库中这样写的:This package has been renamed to ‘sass’.(意思是:此包已被重命名为“sass”。)

yarn add sass node-sass@npm:sass  
或者
npm install sass node-sass@npm:sass  

解决啦

补充:不同node-sass版本的环境

https://github.com/sass/node-sass/releases

安装中出现问题总结

两步骤解决出现Node Sass version 7.0.0 is incompatible with 4.0.0错误使用 create-react-app 构建前端工程

想要使用sass,安装好 npm install node-sass --save

启动服务报错:

Node Sass version 7.0.1 is incompatible with ^4.0.0

看错误是不兼容导致的

npm uninstall node-sass
npm i -D sass

亲测可用!

总结

到此这篇关于React安装node-sass失败解决方案的文章就介绍到这了,更多相关React安装node-sass失败解决内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • React实现路由鉴权的实例详解

    React实现路由鉴权的实例详解

    React应用中的路由鉴权是确保用户仅能访问其授权页面的方式,用于已登录或具有访问特定页面所需的权限,这篇文章就来记录下React实现路由鉴权的流程,需要的朋友可以参考下
    2024-07-07
  • React-router中结合webpack实现按需加载实例

    React-router中结合webpack实现按需加载实例

    本篇文章主要介绍了React-router中结合webpack实现按需加载实例,非常具有实用价值,需要的朋友可以参考下
    2017-05-05
  • React 数据获取条件竞争原理解析

    React 数据获取条件竞争原理解析

    这篇文章主要为大家介绍了React 数据获取条件竞争原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • 记React connect的几种写法(小结)

    记React connect的几种写法(小结)

    这篇文章主要介绍了记React connect的几种写法(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • react中使用redux-persist做持久化储存的过程记录

    react中使用redux-persist做持久化储存的过程记录

    这篇文章主要介绍了react中使用redux-persist做持久化储存的相关资料,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-01-01
  • React闭包陷阱产生和解决小结

    React闭包陷阱产生和解决小结

    闭包陷阱是一个常见的问题,尤其是在处理异步操作、事件处理器、或是定时器时,本文就来介绍一下React闭包陷阱产生和解决小结,具有一定的参考价值,感兴趣的可以了解一下
    2025-04-04
  • React常见跨窗口通信方式实例详解

    React常见跨窗口通信方式实例详解

    这篇文章主要为大家介绍了React常见跨窗口通信方式实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • React中setState/useState的使用方法详细介绍

    React中setState/useState的使用方法详细介绍

    这篇文章主要介绍了React中setState/useState的使用方法,useState 和 setState 在React开发过程中 使用很频繁,但很多人都停留在简单的使用阶段,并没有正在了解它们的执行机制
    2023-04-04
  • webpack+react+antd脚手架优化的方法

    webpack+react+antd脚手架优化的方法

    本篇文章主要介绍了webpack+react+antd脚手架优化的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • react中的useEffect()的使用详解

    react中的useEffect()的使用详解

    useEffect()是react中的hook函数,作用是用于创建由渲染本身引起的操作,介绍了依赖项数组不同的区别,对react useEffect()使用相关知识感兴趣的朋友一起看看吧
    2024-05-05

最新评论