1.问题
如果你遇到了如下报错和问题如:
Node Sass does not yet support your current environment: OS X Unsupported architecture (arm64) with Unsupported runtime (102)
error /Users/xxx/code/xxx/node_modules/node-sass: Command failed.
那么问题的原因很可能是以下两种可能:
- M1架构和node-sass不兼容,完全不支持node-sass
- node-sass和node版本冲突
2.查找问题根源
- 首先查看是不是node-sass和node的版本不兼容,见下图
或者从该链接查看对应兼容的版本:github.com/sass/node-s…
如果问题是版本不兼容,那么建议按照对应的node-sass版本降低node版本
但是! 大部分网上的文章,都把出现上述两个报错的原因归结为node-sass和node版本冲突,当在降低node版本后发现问题还是存在,这其实是node-sass根本不兼容M1芯片的macbook(采用的是arm64架构,记住这个架构,很重要) 回顾这张图
Node-sass根本就不支持arm64架构
3.解决方案
那么解决方案有如下:
-
首先处理node版本和node-sass版本的冲突
-
其次是处理M1芯片(arm64架构)与node-sass的不兼容: 主要有两种方法:
-
1.使用Rosetta模拟x86架构
Rosetta”是 Apple Mac 应用程序的名称,即使在 Apple ARM(即 Apple M1 芯片)上也可以模拟 x86 架构。“终端”是 Mac 上采用命令行输入 (CLI) 的应用程序,并与 Visual Studio Code 集成。Visual Studio Code 是最流行的开发 IDE 工具之一。
既然不兼容arm架构,那么使用rosetta来模拟x86架构来运行终端
第一步:在应用程序中找到终端app,右键选择显示简介,然后选择Rosetta打开
第二步:勾选使用rosetta打开
第三步:在终端安装依赖
rm -rf node_modules # 如果你安装过依赖了,请先删除 yarn/npm install --target_arch=x64 # 然后安装x64架构的依赖,如果你直接安装失败了的话,就加上这个
如果想在vscode终端中也采用rosetta
打开你的
settings.json
文件。在代码中,您可以从菜单栏打开settings.json
,方法是选择View>Command Palette,在Palette文本字段中键入open settings json
,然后从Palette列表中选择“首选项:打开设置(JSON)”。将如下示例中的
terminal.integrated.profiless.osx
复制到你自己的settings.json
中,如果想让Rosetta成为默认的终端配置文件,还可以复制terminal.integrated.defaultProfile.osx
字段settings.json例子如下:
{ "editor.minimap.enabled": false, "window.zoomLevel": 1, "haskell.plugin.hlint.codeActionsOn": false, "haskell.plugin.hlint.diagnosticsOn": false, "editor.accessibilitySupport": "off", "breadcrumbs.enabled": false, "terminal.integrated.profiles.osx": { "x86 zsh": { "path": "/usr/bin/arch", "args": ["-arch", "x86_64", "/bin/zsh"] } }, "terminal.integrated.defaultProfile.osx": "x86 zsh" }
-
2.将node-sass替换成sass(此类文章很多,不做赘述)
码字不易~ 如果有用,麻烦🐻弟姐妹们点赞来一波~
-