webpack安装node-sass遇到的坑

最新推荐文章于 2024-04-18 10:59:26 发布
最新推荐文章于 2024-04-18 10:59:26 发布
阅读量2.3k 收藏 4
点赞数
分类专栏： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42852004/article/details/104561170
版权

问题呈现：

npm i sass-loader node-sass -D

安装node-sass的时候报下面的错误：

PS C:\Users\Administrator\Desktop\webpack4.x> npm install sass-loader node-sass --save-dev
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142

> node-sass@4.13.1 install C:\Users\Administrator\Desktop\webpack4.x\node_modules\node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.13.1/win32-x64-72_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v4.13.1/win32-x64-72_binding.node":

connect ETIMEDOUT 54.231.82.211:443

Timed out whilst downloading the prebuilt binary

Hint: If github.com is not accessible in your location
      try setting a proxy via HTTP_PROXY, e.g.

      export HTTP_PROXY=http://example.com:1234

or configure npm proxy via

      npm config set proxy http://example.com:8080

> node-sass@4.13.1 postinstall C:\Users\Administrator\Desktop\webpack4.x\node_modules\node-sass
> node scripts/build.js

Building: C:\IT软件\node.js\node.exe C:\Users\Administrator\Desktop\webpack4.x\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [
gyp verb cli   'C:\\IT软件\\node.js\\node.exe',
gyp verb cli   'C:\\Users\\Administrator\\Desktop\\webpack4.x\\node_modules\\node-gyp\\bin\\node-gyp.js',
gyp verb cli   'rebuild',
gyp verb cli   '--verbose',
gyp verb cli   '--libsass_ext=',
gyp verb cli   '--libsass_cflags=',
gyp verb cli   '--libsass_ldflags=',
gyp verb cli   '--libsass_library='
gyp verb cli ]
gyp info using node-gyp@3.8.0
gyp info using node@12.16.1 | win32 | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb `which` failed Error: not found: python2
gyp verb `which` failed     at getNotFoundError (C:\Users\Administrator\Desktop\webpack4.x\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (C:\Users\Administrator\Desktop\webpack4.x\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (C:\Users\Administrator\Desktop\webpack4.x\node_modules\which\which.js:80:29)
gyp verb `which` failed     at C:\Users\Administrator\Desktop\webpack4.x\node_modules\which\which.js:89:16
gyp verb `which` failed     at C:\Users\Administrator\Desktop\webpack4.x\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at C:\Users\Administrator\Desktop\webpack4.x\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqCallback.oncomplete (fs.js:166:21)
gyp verb `which` failed  python2 Error: not found: python2
gyp verb `which` failed     at getNotFoundError (C:\Users\Administrator\Desktop\webpack4.x\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (C:\Users\Administrator\Desktop\webpack4.x\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (C:\Users\Administrator\Desktop\webpack4.x\node_modules\which\which.js:80:29)
gyp verb `which` failed     at C:\Users\Administrator\Desktop\webpack4.x\node_modules\which\which.js:89:16
gyp verb `which` failed     at C:\Users\Administrator\Desktop\webpack4.x\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at C:\Users\Administrator\Desktop\webpack4.x\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqCallback.oncomplete (fs.js:166:21) {
gyp verb `which` failed   stack: 'Error: not found: python2\n' +
gyp verb `which` failed     '    at getNotFoundError (C:\\Users\\Administrator\\Desktop\\webpack4.x\\node_modules\\which\\which.js:13:12)\n' +
gyp verb `which` failed     '    at F (C:\\Users\\Administrator\\Desktop\\webpack4.x\\node_modules\\which\\which.js:68:19)\n' +
gyp verb `which` failed     '    at E (C:\\Users\\Administrator\\Desktop\\webpack4.x\\node_modules\\which\\which.js:80:29)\n' +
gyp verb `which` failed     '    at C:\\Users\\Administrator\\Desktop\\webpack4.x\\node_modules\\which\\which.js:89:16\n' +
gyp verb `which` failed     '    at C:\\Users\\Administrator\\Desktop\\webpack4.x\\node_modules\\isexe\\index.js:42:5\n' +
gyp verb `which` failed     '    at C:\\Users\\Administrator\\Desktop\\webpack4.x\\node_modules\\isexe\\windows.js:36:5\n' +
gyp verb `which` failed     '    at FSReqCallback.oncomplete (fs.js:166:21)',
gyp verb `which` failed   code: 'ENOENT'
gyp verb `which` failed }
gyp verb check python checking for Python executable "python" in the PATH
gyp verb `which` failed Error: not found: python
gyp verb `which` failed     at getNotFoundError (C:\Users\Administrator\Desktop\webpack4.x\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (C:\Users\Administrator\Desktop\webpack4.x\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (C:\Users\Administrator\Desktop\webpack4.x\node_modules\which\which.js:80:29)
gyp verb `which` failed     at C:\Users\Administrator\Desktop\webpack4.x\node_modules\which\which.js:89:16
gyp verb `which` failed     at C:\Users\Administrator\Desktop\webpack4.x\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at C:\Users\Administrator\Desktop\webpack4.x\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqCallback.oncomplete (fs.js:166:21)
gyp verb `which` failed  python Error: not found: python
gyp verb `which` failed     at getNotFoundError (C:\Users\Administrator\Desktop\webpack4.x\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (C:\Users\Administrator\Desktop\webpack4.x\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (C:\Users\Administrator\Desktop\webpack4.x\node_modules\which\which.js:80:29)
gyp verb `which` failed     at C:\Users\Administrator\Desktop\webpack4.x\node_modules\which\which.js:89:16
gyp verb `which` failed     at C:\Users\Administrator\Desktop\webpack4.x\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at C:\Users\Administrator\Desktop\webpack4.x\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqCallback.oncomplete (fs.js:166:21) {
gyp verb `which` failed   stack: 'Error: not found: python\n' +
gyp verb `which` failed     '    at getNotFoundError (C:\\Users\\Administrator\\Desktop\\webpack4.x\\node_modules\\which\\which.js:13:12)\n' +
gyp verb `which` failed     '    at F (C:\\Users\\Administrator\\Desktop\\webpack4.x\\node_modules\\which\\which.js:68:19)\n' +
gyp verb `which` failed     '    at E (C:\\Users\\Administrator\\Desktop\\webpack4.x\\node_modules\\which\\which.js:80:29)\n' +
gyp verb `which` failed     '    at C:\\Users\\Administrator\\Desktop\\webpack4.x\\node_modules\\which\\which.js:89:16\n' +
gyp verb `which` failed     '    at C:\\Users\\Administrator\\Desktop\\webpack4.x\\node_modules\\isexe\\index.js:42:5\n' +
gyp verb `which` failed     '    at C:\\Users\\Administrator\\Desktop\\webpack4.x\\node_modules\\isexe\\windows.js:36:5\n' +
gyp verb `which` failed     '    at FSReqCallback.oncomplete (fs.js:166:21)',
gyp verb `which` failed   code: 'ENOENT'
gyp verb `which` failed }
gyp verb could not find "python". checking python launcher
gyp verb could not find "python". guessing location
gyp verb ensuring that file exists: C:\Python27\python.exe
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack     at PythonFinder.failNoPython (C:\Users\Administrator\Desktop\webpack4.x\node_modules\node-gyp\lib\configure.js:484:19)
gyp ERR! stack     at PythonFinder.<anonymous> (C:\Users\Administrator\Desktop\webpack4.x\node_modules\node-gyp\lib\configure.js:509:16)
gyp ERR! stack     at callback (C:\Users\Administrator\Desktop\webpack4.x\node_modules\graceful-fs\polyfills.js:295:20)
gyp ERR! stack     at FSReqCallback.oncomplete (fs.js:166:21)
gyp ERR! System Windows_NT 10.0.17763
gyp ERR! command "C:\\IT软件\\node.js\\node.exe" "C:\\Users\\Administrator\\Desktop\\webpack4.x\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd C:\Users\Administrator\Desktop\webpack4.x\node_modules\node-sass
gyp ERR! node -v v12.16.1
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
Build failed with error code: 1
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! node-sass@4.13.1 postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the node-sass@4.13.1 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2020-02-28T10_01_25_552Z-debug.log
PS C:\Users\Administrator\Desktop\webpack4.x>

原因：

windows平台缺少编译环境

解决方案：

第一步：安装node-gyp
npm install node-gyp -g
第二步： 安装windows-build-tools
npm install --global --production windows-build-tools
第三步： 卸载之前安装的node-sass
npm uninstall node-sass -D
第四步：重新安装node-sass
npm install node-sass -D
成功安装node-sass

在这里插入图片描述

我是顾昀峰
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack-sass-poc:使用基于 npm 的 SASS 存储库的 webpack sass 概念证明
06-01
git clone https://github.com/GasStationTV/webpack-sass-poc.git ###Step 2 - 设置 npm run setup 运行安装程序将执行 npm install 并将 style-repos 复制到 node_modules 中以模仿 npm 样式的 repo 依赖项。 ...
webpack4.0中使用node-sass报错记录，有大坑
qq_36450673的博客
04-08 1624
今天在vue实战练习中碰到了一个让我欲哭无泪的坑，记录如下： 1.如果在使用scss样式时，必须要安装node-sass,sass-loader，style-loader命令如下,编译器中打开终端在项目中输入命令，记得在安装node-sass时换一下镜像源，参考以下博客： 整理 node-sass 安装失败的原因及解决办法 npm install node-sass -D npm install ...
SASS的安装配置（基于webpack4.x）
tangjie109411的博客
10-04 3885
SASS的安装配置 在这里必要的环境我就不说了。 为了使用sass，我们需要安装sass的依赖包 //在项目下，运行下列命令行 npm install --save-dev sass-loader //因为sass-loader依赖于node-sass，所以还要安装node-sass npm install --save-dev node-sass 当然了，使用样式的话，css-loader和s...
node-sass 版本对应的node版本以及 支持的sass-loader版本
最新发布
weixin_47908090的博客
04-18 1702
node-sass sass-loader node
node 14.19.0 版本成功解决：安装 node-sass 和 sass-loader 的过程及各 node 版本对应的 node-sass 版本号
热门推荐
狮子座的男孩
05-11 5万+
1、node 版本、node-sass 版本及 sass-loader 版本查看： 其一、我的 node 版本查看： 在命令行输入查询命令：node -v 我的 node 版本为：v14.19.0 其二、我的 node-sass 版本查看："node-sass": "^4.14.1" 其三、我的 sass-loader 版本查看："sass-loader": "^7.3.1" 2、node 版本与 node-sass 版本的对应关系： 其一、查看文档的地址： https://www.npmjs.com
webpack编译,node-sass安装 Cannot find module ‘node-sass
gl593618826的博客
08-21 397
webpack5编译,安装node-sass和sass-loader版本不一致 100%解决方法 正常情况下安装sass-loader非常简单:但是安装node-sass的时候会一直报错:Cannot find module 'node-sass'因为安装到nodejs里面了,当前node_modules里并没有node-sass解决办法:node-sass安装成功webpack也能正常编译成功: npx webpack 正常情况下安装sass-loader非常简单: npm install sass-lo
webpack报错，node-sass安装失败
就是说，有点不想敲代码了
08-23 403
近期在进行webpack实践时，需要给项目安装sass项目依赖，遇到node-sass安装失败问题。 当时我用npm i -D sass-loader node-sass同时安装sass-loader和node-sass，有报错。 原因： node-sass在线外网安装存在翻墙不到的情况导致无法下载.node文件。 解决办法： 网上有许多方法，主要都是 改用淘宝镜像进行安装 直接下载包放到项目...
webpack-babel:对于那些不喜欢那个的人 react-webpack-gulp-grunt-allinone-node-brew-bootstrap-sass-hot-responsive-html9boilerstrapjs-solutions
07-15
webpack-babel 您见过的最简单的入门套件，用于运行 Webpack 和 Babel 应用程序。 灵感 有很多入门工具包可用于您的下一个前端应用程序。 但说真的，在我看来，所有这些都是胡说八道：90% 的东西你都不会用； 5% 是...
netcore-sass-webpack:在Visual Studio和Webpack中编译Sass文件
05-13
用法打开命令提示符，将此仓库克隆并复制到项目中以安装JavaScript依赖项git clone https://github.com/esausilva/netcore-sass-webpack.gitcd netcore-sass-webpack\netcore-sass-webpacknpm i 安装依赖项后，双击...
node-sass-alias-importer:节点sass导入器，支持目录或特定文件的自定义别名
05-14
安装npm i --save-dev node-sass-alias-importer用法使用在javascript完成操作，为sass导入中的目录或特定文件定义别名。 const sass = require ( "node-sass" ) ;const aliasImporter = require ( "node-sass-alias...
webpack-static-site-boilerplate:具有ES6 +，SASSLESS支持，开发服务器和livereload的Webpack 4静态站点样板
05-13
具有ES6 +，SASS / LESS支持和开发服务器的Webpack 4静态站点样板 指示 该Webpack 4 Boilerplate带有4个构建...npm rm node-sass sass-loader 将cssPreprocessor中的cssPreprocessor设置为sass 。 更少的预处理器 n
怎么替换webpack的安装版本
qq_42852004的博客
10-22 4735
第一步：查询当前webpack的版本信息：npx webpack -v 第二步：查询webpack的历史版本：npm info webpack 第三步：安装webpack其他版本：npm install webpack@4.16.5 webpack-cli -D 第四步：检查package.json的版本号 ...
vue-cli中webpack从2.x升级到4.x
qq_42852004的博客
03-23 947
对vue-cli脚手架的webpack升级 背景为什么需要升级webpack2.x 因为打包700个静态路由的情况下，出现直接卡主不能在启动，并且没有splitChunk这个功能 第一步：安装webpack-cli和webpack npm install webpack-cli -D npm install webpack@4.26.1 -D 第二步： npm run dev启动脚手架在vscode命令行报错 ::: warning 注意是因为webpack和html-webpack-plugin版本没
webpack4.x配置autofixer无效
qq_42852004的博客
09-11 338
解决方案一： 在package.json中配置browserlist参数 { "name": "webpacktest", "version": "1.0.0", "description": "", "private": true, "scripts": { "bundle": "webpack", "watch": "webpack --watch", ...
npm ERR! Unexpected end of JSON input while parsing near '...Rg9e9zaVBZ
qq_42852004的博客
03-01 329
问题呈现 npm install @babel/preset-env --save-dev npm ERR! Unexpected end of JSON input while parsing near '...Rg9e9zaVBZmVC6WEx1k\n' npm ERR! A complete log of this run can be found in: npm ERR! C:\...
webpack的定义和作用
qq_42852004的博客
09-10 214
webpack 的定义和作用
--save-dev 安装的插件用-v查询不到该插件的版本信息
qq_42852004的博客
10-22 150
问题概述：–save-dev会把插件安装到项目的根目录，但是用-v查询不到， 原因： -v是全局搜索，而–save-dev会把插件安装入node moudle中，-v查询不到，因此我们需要借助node模块的npx方法来查询 举例： webpack -v 查询不到 npx webpack -v 可以查询到webpack的版本信息 –save -dev比-g的好处就是可以不影响其他项目的项目 ...
如何安装webpack基础环境
qq_42852004的博客
10-22 137
流程结构图： 第一步： 初始化一个npm npm init 同时在文件夹中会生成一个package.json 第二步：填写一些基本项目信息 第三步：安装webpack-cli npm install webpack-cli --save-dev 同时在package.json的devDependencies中生成webpack-cli的版本信息 文件夹中生成一个node_modul...
用 nom 如何安装 node-sass
07-28
要通过 npm 安装 node-sass，您可以按照以下步骤操作： 1. 打开终端或命令提示符。 2. 导航到您的项目目录，或者您可以选择在全局范围内安装 node-sass。 3. 运行以下命令进行安装： ``` npm install node-sass ``` 4. 等待安装完成。一旦安装完成，您就可以在项目中使用 node-sass 了。 如果您希望在开发过程中自动编译 Sass 文件并生成对应的 CSS 文件，您可能还需要一个构建工具（如 Gulp、Webpack 等）来配置相关任务。 请注意，node-sass 的安装可能需要一些额外的构建工具和依赖项，例如 Python 和 Node.js 的开发包。如果遇到安装问题，请根据您的操作系统和环境进行相应的配置和安装。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值