node-sass与Macbook M1冲突的完全解决办法

8,927 阅读2分钟

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的版本不兼容,见下图

截屏2022-02-01 下午4.40.46.png

或者从该链接查看对应兼容的版本:github.com/sass/node-s…

如果问题是版本不兼容,那么建议按照对应的node-sass版本降低node版本

但是! 大部分网上的文章,都把出现上述两个报错的原因归结为node-sass和node版本冲突,当在降低node版本后发现问题还是存在,这其实是node-sass根本不兼容M1芯片的macbook(采用的是arm64架构,记住这个架构,很重要) 回顾这张图

截屏2022-02-01 下午4.41.02.png

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打开

      截屏2022-02-01 下午4.49.17.png

      第二步:勾选使用rosetta打开

      截屏2022-02-01 下午4.50.06.png

      第三步:在终端安装依赖

      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(此类文章很多,不做赘述)

      码字不易~ 如果有用,麻烦🐻弟姐妹们点赞来一波~