I recently got an M1 mac and ran into a few weird issues in getting my standard AMP environment setup, as well as a couple of little things with Drupal for our particular theming setup.

There are lots of other articles online that detail the full setup and installation of Apache, PHP and MySQL, including with some added info for M1 Macs already, so I won't cover all that here. Plus I've already got my other article about setting up multiple PHP versions using PHP-FPM here.

Problem 1: dnsmasq Would Not Work

TL;DR: Use port 35353 for dnsmasq

I did my usual installation and configuration of dnsmasq and the resolver (in /etc/resolver) for a .test domain. I did everything the same as I normally did on all my Intel macs, yet for some reason I could not ping any local .test domains, it would simply not find the server.

When I first ran "brew services list" I noticed that dnsmasq had an error, but I couldn't find the log file to understand the details. I just kept googling and googling and found various articles on the full LAMP or LEMP setup that included dnsmasq, but nothing that was identified anything different or specific for M1 macs (other than the homebrew path differences). That is, until I found this article here that specified a different port number for dnsmasq. I had actually already attempted using a different port number (5353) instead of leaving it on the default, which had gotten rid of the error shown by "brew services list", but it still didn't work.

The article linked above happened to use port 35353, which clearly they had tested, and that worked!

Problem 2: Gulp Sass Compilation

TL;DR: You need to use Gulp Sass 5 and the Sass compiler library with it on an M1 Mac.

This issue is going to depend entirely on what base theme you are using, if it's using gulp sass and if so what version. I've been using the Bootstrap Barrio base theme with the Bootstrap Sass Starterkit. The starterkit theme was configured to use Gulp sass 4.x, which works with Node 14 and expects node-sass to be available for compiling sass. This is deprecated and not included with Node 16 anyway, plus even if you are using Node 14 it just won't install on an M1 Mac anyway.

If you happen to be using any other theme that wants to use Gulp Sass 4.x or expects node-sass to be available you'll run into the same issue. The simple solution is to use Gulp Sass 5 and the Sass compiler to go with it.

For reference:

  • Bootstrap Sass Starterkit Issue
    At the time of writing this article the changes are not included in a production version, but you can update your package.json file manually.
  • Bootstrap Barrio Patch
    This just patches some of the Sass code to avoid some deprecated warnings, if you need it.

You may also need to update your own Sass code, so just watch for any errors or warnings during compilation. All I found was that division calculations had to be wrapped in calc().