最近個人でM1 Macbook Airを購入しました。自宅にはMac book Airが２つがあるのですが、相当ボロくなってしまったので、メルカリで打っても2,3万しかなりませんでした。なので、2013モデルはWindows10にBootCampにして、2015年モデルは実家に置くことにしました。奥さんには自分が使っていたMacBook Core M7 2016年モデルをあげました。古臭くなったMacはWindows化して、検証機器として利用できますので非常にオススメです。
M1 MacBook Air届いた💻
メモリー16GB、SSD256で11万は安い！これから開発環境らをバシバシテストしていこう。 pic.twitter.com/3Bmnu8nFsk— adachin👾SRE (@adachin0817) January 6, 2022
そして新卒時代に購入したAirはWindows10へ… pic.twitter.com/qjX3CNxEs4
— adachin👾SRE (@adachin0817) January 6, 2022
さて、M1 Macを触り始めてからIntelのMacを使いたくなくなってしまう..というなんともパフォーマンスがよく、目からウロコが出てしまうマシンであると感じました。またARMアーキテクチャのCPUを採用しているため、開発環境はいくつか対応をする必要があります。
そこで個人開発をしている「famii」がDockerで問題なく動作するのか試してみましたが、yarn installができなくなってしまったのでその対処法をブログします。
M1でyarn installができなくなってしまった…!
これはわからん！ #MENTA #学びログ #今日の積み上げ #CakePHP— adachin👾SRE (@adachin0817) January 11, 2022
error node-sass: Command failed.
- docker-compose
|
1 2 3 4 5 6 |
~/git/github/famii/docker/dev (master=) $ docker-compose ps NAME COMMAND SERVICE STATUS PORTS famii-app "docker-php-entrypoi…" famii-app running 0.0.0.0:80->80/tcp famii-db "docker-entrypoint.s…" famii-db running 0.0.0.0:3309->3306/tcp famii-redis "docker-entrypoint.s…" famii-redis running 0.0.0.0:6379->6379/tcp |
- yarn install
|
1 2 3 4 5 6 7 8 9 10 11 |
$ docker exec -it famii-app bash bash-5.1# cd frontend bash-5.1# yarn install error /var/www/famii/frontend/node_modules/node-sass: Command failed. Exit code: 1 Command: node scripts/build.js Arguments: Directory: /var/www/famii/frontend/node_modules/node-sass Output: Building: /usr/bin/node /var/www/famii/frontend/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library= |
- yarn build
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
bash-5.1# yarn build dium.com/gulpjs/gulp-util-ca3b1f9f9ac5 [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... error /var/www/famii/frontend/node_modules/node-sass: Command failed. Exit code: 1 Command: node scripts/build.js Arguments: Directory: /var/www/famii/frontend/node_modules/node-sass Output: Building: /usr/bin/node /var/www/famii/frontend/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 '/usr/bin/node', gyp verb cli '/var/www/famii/frontend/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=' |
- package.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
{ "name": "famii-frontend", "version": "1.0.0", "main": "index.js", "author": "RVIRUS0817", "license": "MIT", "devDependencies": { "browser-sync": "^2.26.7", "fs": "^0.0.1-security", "gulp": "^4.0.2", "gulp-autoprefixer": "^7.0.1", "gulp-changed": "^4.0.2", "gulp-clean": "^0.4.0", "gulp-clean-css": "^4.3.0", "gulp-html-minifier": "^0.1.8", "gulp-if": "^3.0.0", "gulp-plumber": "^1.2.1", "gulp-prettify": "^0.5.0", "gulp-rename": "^2.0.0", "gulp-replace": "^1.0.0", "gulp-sass": "^4.1.0", "gulp-sourcemaps": "^3.0.0", "gulp-swig": "^0.9.1", "run-sequence": "^2.2.1" ~省略~ |
https://sass-lang.com/blog/libsass-is-deprecated
After much discussion among the Sass core team, we’ve come to the conclusion that it’s time to officially declare that LibSass and the packages built on top of it, including Node Sass, are deprecated. For several years now, it’s been clear that there’s simply not enough engineering bandwidth behind LibSass to keep it up-to-date with the latest developments in the Sass language (for example, the most recent new language feature was added in November 2018). As much as we’ve hoped to see this pattern turn around, even the excellent work of long-time LibSass contributors Michael Mifsud and Marcel Greter couldn’t keep up with the fast pace of language development in both CSS and Sass.
・We no longer recommend LibSass for new Sass projects. Use Dart Sass instead.
・We recommend all existing LibSass users make plans to eventually move onto Dart Sass, and that all Sass libraries make plans to eventually drop support for LibSass.
・We’re no longer planning to add any new features to LibSass, including compatibility with new CSS features.
・LibSass and Node Sass will continue to be maintained indefinitely on a best-effort basis, including fixing major bugs and security issues and maintaining compatibility with the latest Node versions.
調べてみるとLibSass(node-sass)はCSSとSassの両方での言語開発の速いペースに追いつくことができなかったのと、今後はDart Sassを変わりに使ってくれとのことでした。なので、M1というよりもIntelだろうが関係ないので、Dart Sassに移行しなければなりませんね。
ちなみにフロントエンドはBootStrapでgulpで圧縮しています。そしてnode-sassはpackage.jsonの中でgulp-sassに依存しています。まずこれを削除するところからになります。
準備と対応
- yarn.lockを削除
- package.jsonからgulp-sassを削除
|
1 |
- "gulp-sass": "^4.1.0", |
- gulpfile.jsからgulp-sassをgulp-dart-sassに変更
|
1 2 3 4 5 6 |
var gulp = require('gulp'), swig = require('gulp-swig'), plumber = require('gulp-plumber'), replace = require('gulp-replace'), - sass = require('gulp-sass'), + sass = require('gulp-dart-sass'), |
- gulp-dart-sassをインストール
|
1 |
$ yarn add gulp-dart-sass |
- package.jsonにgulp-dart-sassが追加されていることを確認
|
1 |
+ "gulp-dart-sass": "^1.0.2", |
- yarn install
|
1 2 3 4 5 6 7 8 9 |
bash-5.1# yarn install yarn install v1.22.17 info No lockfile found. [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved lockfile. Done in 87.95s. |
Dart Sassになって変わったところは？
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
bash-5.1# yarn build yarn run v1.22.17 $ ./node_modules/.bin/gulp build [23:55:34] Using gulpfile /var/www/famii/frontend/gulpfile.js [23:55:34] Starting 'build'... [23:55:34] Starting 'build-css'... [23:55:34] Finished 'build-css' after 41 ms [23:55:34] Starting '<anonymous>'... [23:55:34] Finished '<anonymous>' after 1.84 ms [23:55:34] Finished 'build' after 45 ms Error in plugin "sass" Message: src/sass/base.scss Error: Expected ". ╷ 20 │ background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' │ ^ ╵ src/sass/base.scss 20:84 root stylesheet Done in 17.40s. |
|
1 2 3 4 |
- background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' - xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(51, 51, 51, 1)' - stroke-width='3' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30'xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(51, 51, 51, 1)'stroke-width='3' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); |
backgroud-imageを使う際は改行ではなくワンライナーにしないとエラーが出ることがわかりました。それ以外は問題なかったので、この機会に yarn upgrade --latest でバージョンアップして完了です。
まとめ
M1 Macでyarn buildができるようになった！
これはブログ書く！結局node-sassは無理で、gulp-dart-sassに変更しただけ。
インフラはともかく、フロントエンドはマジで駆け出しエンジニアですね。 #MENTA #学びログ #今日の積み上げ #フロントエンド— adachin👾SRE (@adachin0817) January 11, 2022
M1 Macでも動作できるようになりましたが、初心者で「M1 Macだから動かない！売却！」というのは浅はかで、調査する能力が問われます。今後はM1が当たり前に使うようになると思いますし、期待しかないと感じました。他にもVagrantはVirtualBoxが利用できないので、代用を考えてみたいと思います。
今回一緒にフォローしてくれた@naoching7010 あざした！いかにフロントエンドの技術力が足りないことが分かりましたので、皆さんもハマったら参考にしてみてください。
0件のコメント