LINEで送る
Pocket

最近個人でM1 Macbook Airを購入しました。自宅にはMac book Airが2つがあるのですが、相当ボロくなってしまったので、メルカリで打っても2,3万しかなりません。なので、2013モデルはWindows10にBootCampにして、2015年モデルは実家に置くことにしました。

古臭くなったMacはWindows化して確定申告時や検証機器として利用できますのでオススメです。

さて、M1 Macを触り始めてからIntelのMacを使いたくなくってしまう..というなんともパフォーマンスがよく、目からウロコが出てしまうマシンであると感じました。またARMアーキテクチャのCPUを採用しているため、開発環境はいくつか対応をする必要があります。

そこで個人開発をしている「famii」がDockerで問題なく動作するのか試してみましたが、yarn installができなくなってしまったのでその対処法をブログします。


error node-sass: Command failed.

  • docker-compose

  • yarn install

  • yarn build

  • package.json

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を削除

  • gulpfile.jsからgulp-sassをgulp-dart-sassに変更

  • gulp-dart-sassをインストール

  • package.jsonにgulp-dart-sassが追加されていることを確認

  • yarn install


    Dart Sassになって変わったところは?

    backgroud-imageを使う際は改行ではなくワンライナーにしないとエラーが出ることがわかりました。それ以外は問題なかったので、この機会に yarn upgrade --latest でバージョンアップして完了です。


    まとめ

    M1 Macでも動作できるようになりましたが、初心者で「M1 Macだから動かない!売却!」というのは浅はかで、調査する能力が問われます。今後はM1が当たり前に使うようになると思いますし、期待しかないと感じました。他にもVagrantはVirtualBoxが利用できないので、代用を考えてみたいと思います。

    今回一緒にフォローしてくれた@naoching7010 あざした!いかにフロントエンドの技術力が足りないことが分かりましたので、皆さんもハマったら参考にしてみてください。

    LINEで送る
    Pocket

    カテゴリー: M1 MacNode

    adachin

    1989年生まれのLancers SRE。 ホスティングから大規模なアドテクなどのインフラエンジニアとして携わる。好きなツールはAnsible,Terraform,CircleCIで、ECS/Fargateでのインフラ構築を得意とする。副業では数社サーバー保守とベンチャー企業のインフラ改善やMENTAで未経験者にインフラのコーチングを実施している。また、「脆弱性スキャナVuls」のOSS活動もしており、自称エバンジェリスト/技術広報/テクニカルサポート/コントリビュータでもある。現在はサービスの信頼性向上、可用性、レイテンシ、パフォーマンス、モニタリング、緊急対応、インフラコード化、リファクタリング、セキュリティ強化、新技術の検証、Docker開発環境の提供、AWSでのインフラ構築、ECS/Fargateへ移行、CakePHP4での管理画面作成、メンター、分析基盤の運用を担当している。個人開発では「夫婦、パートナー向け家事管理サービス/famii」をCakePHP4で絶賛開発中。

    0件のコメント

    コメントを残す

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください