- Published on
Using node-sass instead of system Sass in macOS Catalina
- Authors
- Name
- interglobalmedia
- @letsbsocial1
- Link to Using node-sass instead of system Sass in OS X Catalina on anchorfm
Recently I upgraded to Catalina OS on my late 2015 15" Macbook Pro. As a result, I was not able to access my old Sass installation, and was not able to install Dart Sass for the same reason. In addition, according to the developer.apple.com documentation:
Scripting language runtimes such as Python, Ruby, and Perl are included in macOS for compatibility with legacy software. Future versions of macOS wonât include scripting language runtimes by default, and might require you to install additional packages. If your software depends on scripting languages, itâs recommended that you bundle the runtime within the app. (49764202) Use of Python 2.7 isnât recommended as this version is included in macOS for compatibility with legacy software. Future versions of macOS wonât include Python 2.7. Instead, itâs recommended that you run python3 from within Terminal. (51097165)
One deprecation which did not come as a surprise to me, was
Xcode Deprecations
- Command line tool support for Subversion â including svn, git-svn, and related commands â is no longer provided by Xcode. If you need Subversion or related command line tools, install the Command Line Tools package by running xcode-select --install. (50266910)
Not that I ever used Subversion or had the desire to use it!
Since I had installed Ruby and Sass eons ago, no surprise that it is no longer working. Especially since it resides in a path that no longer exists in Catalina. In addition, I had used rbenv to install various versions of the old Sass, and that no longer works either. I had installed it via Homebrew, and I don't care what the core team says, but Homebrew is not completely compatible with Catalina when it comes to older software. But then, the older software is being tossed out the window, so getting rid of it is advisable. I did just that with rbenv (which is still stuck in my computer where I can't seem to reach it). I will revisit that issue when I have a moment.
Git works well on my machine. I was a bit confused by what version I should have been on, and thought my version was old. I later found out from the Homebrew team that I was on the latest, and I was. Sometimes it is difficult to find that kind of information because so much documentation out there is "outdated", and with no publication date! It doesn't help when you are searching for such information at 3am!
But you know what? That is totally fine by me. I decided to just use node-sass in my projects locally. I don't even need to use npx in order to make it work! I am currently on node --version 12.14.0
, and my npm --version
is 6.13.4
.
I immediately came across a very helpful article on how to add node-sass to your JavaScript projects, and made my own adjustments.
Anyhoo, this is what I did to add Sass
to my local
JavaScript projects:
First I npm init
in the root of the project directory. Then I npm node-sass -S
, making sure that I create a package-lock.json file so that anyone who wants to git-clone
my repo and then simply run npm i
to obtain the packages I use in it with no fuss. Without the -S
, a package-lock.json
is not created. Then I created a styles directory in which I added a css directory
and an scss directory
. Inside the css directory
, I added a main.css
file, and in the scss directory
, I added a main.scss
file. So the directory structure of styles
looks like this:
styles - css â main.css - scss â main.scss
Then, in package.json
, I added the following script
:
"scss": "node-sass --watch styles/scss -o styles/css"
In case if you don't know, -o
is shorthand for --output
flag. The script
is taking what is being input into the main.scss
file and printing it out the the main.css
file. This goes back to the command line basics of stdin stdout
. In the case of node-sass
, output is either represented by -o
or --output
. To learn more about node-sass command line options
, please visit node-sass on npmjs.com.
And, since I use VS Code
, I can run the Live Server
extension on my project while watching
my scss
files at the same time. No fuss no muss! Basically, I use the equivalent of Webpack hot-module-replacement
. Very cool! This was especially helpful (and quickly implemented) when setting up a whole bunch of repositories for a JavaScript
course I am teaching.
To view how I set up node-sass
in a small, purely JavaScript
application, please visit Toggle Can on Github.
I will be embedding this episode of Plugging in The Holes along with a transcript in the form of a post on interglobalmedianetwork.com for your hearing and reading pleasure. I will be including the related resource links mentioned in the podcast of course. Always do. Bye for now!