M1Mac×Dockerでnode-sassは使えます

背景

Intel MacからM1 Macに乗り換え、Docker環境でyarn installした際に今まで発生しなかったnode-sass周りのエラーが発生した。

package.json

{
  ...
  "dependencies": {
    "node-sass": "^4.12.0",
    ...
  }
}

エラー内容

error /app/node_modules/node-sass: Command failed.
Exit code: 1
Command: node scripts/build.js
Arguments:
Directory: /app/node_modules/node-sass
Output:
Building: /usr/local/bin/node /app/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
...
Module Error (from ./node_modules/sass-loader/dist/cjs.js):
Node Sass does not yet support your current environment: Linux Unsupported architecture (arm64) with Node.js 12.x

ググってみるとM1 Macの命令セットであるARM64の場合は挙動が異なるみたいで、Python make g++をDockerfileに追加するといいらしい。

--- a/Dockerfile
+++ b/Dockerfile
FROM node:12.21.0-alpine3.10

RUN apk update && \
  apk add --no-cache python make g++ # 追加

これらはnode-gypが正常に動くために必要みたいですね。

まとめ

M1 Macでnode-sass使えない系の記事が多かったので困っている方のお役に立てれば幸いです。
少なくともDocker環境では使えると思います。

参考

https://note.com/masuidrive/n/nc354b8781215
https://github.com/nodejs/node-gyp