SASS on M1 Mac

[lenrooney]

I'm trying to move my JointsWP project to a brand new, out of the box, M1 MacBook but have been trouble getting SASS to compile. I'm still a bare novice with Node so I'm struggling to understand how to fix things.

My install of Node and NPM went well, and npm watch is running. However all I get with SASS is, "Error: Node Sass does not yet support your current environment: OS X Unsupported architecture (arm64) with Unsupported runtime (102)"

Is there a newer Sass and or a package.json changes that are known to work at this point?

Also, I'm not sure this is the place to find help on this. Any other recommends for JointsWP support groups?

[lenrooney]

This git seems very quiet so I had to dig in Google and RTFM! I got sass working so I thought I would share the results here for anyone else on the same path.

First, I edited the package.json file (line 27): "gulp-sass": "^5.1.0",

This is the latest version. I figured I'd start with that and work backward if required. Set this package.json line first, otherwise, later, npm will load the old version 3.0.0.

I needed a new version of Node.js. I'm using Homebrew Package Manager ( https://brew.sh ) so ...

Remove the old node brew uninstall node

Add new LTS version (16.14.0) brew install node@16

Test your install with node -v Restart your terminal.

(Homebrew) If you need to have node@16 first in your PATH: echo 'export PATH="/usr/local/opt/node@16/bin:$PATH"' >> ~/.zshrc

Check your npm version: npm -v (8.4.1)

Next, I installed gulp-sass with: npm install sass gulp-sass --save-dev and tried npm run watch, but kept getting this error:

Error in plugin "gulp-sass"
Message:

gulp-sass no longer has a default Sass compiler; please set one yourself. Both the "sass" and "node-sass" packages are permitted.
For example, in your gulpfile:
  const sass = require('gulp-sass')(require('sass'));

Lots of Googling later, I find out that I need to edit the gulpfile.js to add the line const sass = require('gulp-sass')(require('sass'));

After many hours trying different versions of that line and seeing them not working, I finally had to look at how sass was being called and then realized that because the compiler is no longer part of gulp-sass plugin the existing line (121) .pipe(plugin.sass()) was an empty call. I replaced it with:

.pipe(sass().on('error', sass.logError))

And finally it works!

The unchanged scripts and images functions within watch are also still working.

Browsersync wasn't working before, so I'm not worried about that, but I might look into it at some point.

I consider this a hack because I don't fully understand this git/node/npm/cli environment yet, but I'll include my edited gulpfile here in case someone with more experience might want to have a go at improving on it. I'm not sure how to add it as a fork or if I'm even allowed to. I'll have learn more about GitHub.

gulpfile.zip

Len

[arelidev]

After making through changes, I'm getting error message: Error: Cannot find module 'sass'

Any thoughts?

[timbeadle]

After making through changes, I'm getting error message: Error: Cannot find module 'sass'

Any thoughts?

@arelidev You need to install sass or node-sass separately if you're using gulp-sass v5.x.

npm install sass --save-dev

You then need to require sass in your gulpfile as per the migration guide: https://www.npmjs.com/package/gulp-sass#migrating-to-version-5

const sass = require('gulp-sass')(require('sass'));

Hope that helps!