React项目中使用scss，遇上node-sass安装不上的解决方法

最新推荐文章于 2023-04-10 17:16:01 发布
最新推荐文章于 2023-04-10 17:16:01 发布
阅读量1.2k 收藏 2
点赞数 1
分类专栏： npm node-sass 文章标签： npm nodejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zwf193071/article/details/107493419
版权

亲测有效，找遍了很多网站，其实真正的步骤只有下面2个：
1. 去淘宝镜像下载binging.node---https://npm.taobao.org/mirrors/node-sass/v4.14.1/win32-x64-64_binding.node,下载完成后存于D盘；

2. 运行以下命令，即可成功按照node-sass

npm install node-sass -D --sass_binary_path=D:/win32-x64-64_binding.node

成功截图：

备注：npm安装node-sass时，一定要跟二进制路径名，若先设置了路径，再install，也会报错，故建议放在一条命令上执行

按照上述2步安装成功后，运行项目，会出现下面的提示：

在当前项目的node_modules\node-sass里，新建vendor文件夹，再将之前下载的binging.node拷贝到新建的vendor文件夹里，记得改名字为binding.node

 

zwf193071
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
node-sass安装一直失败、node-sass@4.14.1报错
三七_z
12-05 4516
node-sass安装一直失败、node-sass@4.14.1报错
React 安装 node-sass失败解决方案
松烟入墨
12-08 1125
第一种：修改源地址 在项目的根路径中添加.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库中这样写的：Th
解决React中使用scss前置的npm install node-sass报错问题
qq_43508736的博客
08-16 611
解决React中使用scss前置的npm install node-sass报错问题 在React中使用scss-loader前需要先安装node-sass。在npm install node-sass -D 时有时候会安装到一半甚至最后报一个timeout的错误 很痛苦。如下： 解决方法是使用镜像 npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ 然后再npm install node-sass -D 就
关于react引入 sass ， node-sass 加载不进来的坑
qq_34703156的博客
11-25 525
关于引入sass ，node-sass加载不进来的坑 1 npm install sass 做个不多说 官网文档有 2 npm installnode-sass 是用来吧cssc文件编译成 css 文件的 要想使用sass 必须加载cacc 编译插件 3 node-sass 插件安装 必须严格按照 node 版本按个匹配 这个规则可以看https://www.npmjs.com/package/node-sass ...
React-引入sass
宇哥大男神的博客
08-20 1114
引入sass 项目是用create-react-app脚手架创建的，然后在项目中可以引入scss预编译，这样写起样式起来也很方便 1.安装 node-sass npm install node-sass 2.安装 node-sass-chokidar npm install node-sass-chokidar 3.在项目的package.json中 scripts 里面添加以下 "build-css": "node-sass-chokidar src/ -o src/", "watch
react中安装使用sass
LiuPangZi6的博客
09-17 2951
一、引入sass库 npm install node-sass sass-loader --save 二、使用方法 方法1：定义UserInfo.scss文件 .UserInfo{ color: red; } jsx引入scss文件 import './UserInfo.scss' export default class Login extends React.Component { ...
react移动端项目构建，react@18.2.0+react-vant+vite+axios+redux+sass
03-06
该架构已解决大部分坑，主要用于react@18.2.0移动端，在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、vant、sass、vite、sass、react V18，其中还会介绍到如何跨页面传递数据、...
sass-css-modules-webpack：使用Sass和CSS模块创建React App
02-05
如何将Sass和CSS模块安装到Create React App中 该项目是通过。 npm run eject yarn eject npm i sass-loader node-sass --save yarn add sass-loader node-sass 修改webpack.config.dev.js文件 const ...
react移动端项目构建TS，react@18.2.0+react-vant+vite+axios+redux+sass+ts
03-06
该架构已解决大部分坑，主要用于react@18.2.0移动端，在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、vant、sass、vite、sass、react，其中还会介绍到如何跨页面传递数据、国际...
react PC端项目构建TS，react@18.2.0+antd+vite+axios+redux+sass+ts
最新发布
03-07
该架构已解决大部分坑，主要用于react@18.2.0PC端，在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、antd、sass、vite、sass、react V18，其中还会介绍到如何跨页面传递数据、...
material-ui-sass:Material-ui框架中与Sass相对的React
05-19
在您的SCSS文件中，您需要直接从node_modules导入： // when style.scss is in your project's root @import " ./node_modules/material-ui-sass/material-ui " ; /* Your style here */ h1 { text-decoration: ...
React脚手架中使用Sass
Mr-yang的随笔
08-07 1591
一、安装node-sass $ npm install node-sass --save # or $ yarn add node-sass 之后你就可以使用Sass了 //可以在js文件中通过import 来引用*.scss文件 import './public.scss' //可以在scss文件中通过@import来引用*.scss文件 @import './public.scss'; 注意：这边引用路径的都是相对路径。 二、使用绝对路径来引用scss文件 在用scss的过程中，你可能想要在src
react项目中使用sass总结
weixin_66976358的博客
04-10 750
sass文件，以.scss作为文件名后缀。
构建ReactJs项目node-sass编译出错
weixin_30249203的博客
07-03 204
npm run dev本地项目出错 问题栈 verbose Please try running this command again as root/Administrator. 2729 verbose stack Error: node-sass@3.13.1 postinstall: node scripts/build.js 2729 verbose stack Exit status...
creat-react-app安装node-sass常出错
hahahhahahahha123456的博客
04-24 605
安装 node-sass 的正确姿势 安装node-sass的时候总是会各种不成功，今天我琢磨了一会儿总算知道要怎么解决了。 首先要知道的是，安装node-sass时在node scripts/install阶段会从 github.com 上下载一个 .node 文件，大部分安装不成功的原因都源自这里，因为 GitHub Releases 里的文件都托管在 s3.amazonaws...
使用yarn安装包时，抛出Couldn‘t find package “xx“ on the “npm“ registry
热门推荐
zwf193071的专栏
04-13 1万+
前言 这段时间，我想将原基于Vue2的npm包升级到Vue3，在完成Vue3框架的搭建后，执行yarn命令后，却不断地抛出下图错误： 我查看当前npm registry，确定无误，且运行如下命令，可看到该npm包的各个版本号： npm view @babel/runtime versions 解决 这个问题确实诡异，registry库明明有@babel/runtime，为何始终显示该错误信息呢？ 原因我尚未找出，我使用如下命令，解决了yarn安装失败的问题 yarn --registry https:/
使用download-git-repo下载指定库时，遇到git 128错误，如何定位问题并换向解决呢？
zwf193071的专栏
03-03 3360
前言 我正在搭一个脚手架，希望通过命令行终端自动下载git仓库的代码到本地，首先想到的库便是download-git-repo，部分代码如下所示： const download = require('download-git-repo'); download('direct:https://gitee.com/xx/xxx.git', 'test', {clone: true}, (err) => { if (err) { console.log('executeDownload error =
如何用lerna管理多包，并发布至私有NPM库
zwf193071的专栏
07-30 2929
前言 原生脚手架开发痛点 重复性操作 多package本地link 多package依赖安装 多package单元测试 多package代码提交 多package代码发布 版本一致性 发布时版本一致性 发布后相互依赖版本升级 package 越多管理难度越大 lerna的优点 大幅度减少重复 提升操作的标准化 lerna是架构优化的产物，它揭示了一个架构的真理：项目复杂度提升后就需要对项目进行架构优化。架构优化的主要目标往往以效能为核心 所以，我选择了lerna作为包管理工具，但
在create-react-app + react中配置和使用sass
03-25
A： 1. 安装node-sass 在使用Sass之前，首先需要在项目中安装node-sass。可以通过以下命令在项目中安装： ``` npm install node-sass --save-dev ``` 2. 配置webpack 安装node-sass后，需要在Webpack配置文件中配置Sass loader。对于create-react-app（CRA），可以建立一个sass.config.js文件并在其中添加配置信息。 ``` // sass.config.js module.exports = { sassOptions: { includePaths: ["./src"] } }; ``` 我这里是在项目根目录下创建的，所以相对路径为"./src"，如果是其他路径，则相对路径也需要相应更改。 3. 启用Sass 在安装node-sass和完成Webpack配置后，可以在React组件中启用Sass，使用以下命令来安装sass-loader： ``` npm install sass-loader --save-dev ``` 在React组件中，可以使用以下命令来启用Sass： ``` import './style.scss' ``` 在style.scss文件中，您可以编写基于Sass的样式代码。 以上就是在create-react-app中配置和使用sass的步骤。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值