In this article, I'm doing to talk about how I enabled my Drupal theme to have scss.

I'm on a mac, so these instructions are specifically for mac os x.

Drupal is a php framework. Sass is (somewhat surprisingly) a ruby program. While I am a ruby expert, I believe javascript is much closer to css than ruby is, so I'm expecting the scss compiler to be written in node.

In fact, this task has little to do with Drupal or PHP. We will be spending most of the time in a node environment.

I'm making this as simple as possible, and avoiding any of the unnecessary complexity that has infected the modern js ecosystem. We'll be sticking to the basics here.

I'm assuming you have nodejs, npm and yarn installed. If now, you should run `brew install nodejs`. You should install `brew` if you don't have it. I personally use yarn instead of npm (for no good reason, it was a preference of an ex-employer), but if you're not using `yarn`, you can literally substitute `npm` for `yarn` in every command, and it should work.

Alright. Let's create a new node project *inside* your Drupal theme, at root:

  cd <DRUPAL_THEME_ROOT>
  npm init

Here's how my newly created `package.json` looks:

{
  "name": "ish_drupal_theme",
  "version": "0.0.0",
  "description": "piousbox_drupal_theme",
  "main": "main.js",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/wasya-co/ish_drupal_theme.git"
  },
  "author": "Victor Pudeyev ",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/wasya-co/ish_drupal_theme/issues"
  },
  "homepage": "https://github.com/wasya-co/ish_drupal_theme",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

Note that I always put `scripts` at the very end of the file. Since npm is the build system / runner for my node projects, I access `scripts` a lot and want to see what they are, when I `cat package.json`.

Let's install `node-sass`:

  yarn add node-sass

Next, I rename `css/` -> `scss/`. Skipping ahead a little bit - I had to rename all the css files to scss as well:

  brew install rename
  cd scss/components
  rename 's/css$/scss/' *

Next, I compile all the scss (which is exactly what all the css previously was):

  cd <DRUPAL_THEME_ROOT>
  npx node-sass scss/ -o css/

Great! Now, I put this command in the `package.json` file so I don't forget it. My `package.json` files now looks like this:

{
  "name": "ish_drupal_theme",
  "version": "0.0.0",
  "description": "piousbox_drupal_theme",
  "main": "main.js",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/wasya-co/ish_drupal_theme.git"
  },
  "author": "Victor Pudeyev <victor@wasya.co>",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/wasya-co/ish_drupal_theme/issues"
  },
  "homepage": "https://github.com/wasya-co/ish_drupal_theme",
  "dependencies": {
    "node-sass": "^9.0.0"
  },
  "scripts": {
    "compile-css": "node-sass ./scss -o ./css",
    "watch-css": "node-sass -w ./scss -o ./css"
  }
}

`-w` means "watch", files with changes get recompiled on the fly.

I keep `scripts` alphabetical, which is just a good idea. I keep most things alphabetical, even function definitions in a class.

Now, you can run `yarn run watch-css` and changes to scss should compile to css on the fly, refresh the browser and you should see them.

Don't forget to exclude files you don't want, in `.gitignore`! I recommend the following entries in that file:

  node_modules

If you keep vendor files (bootstrap, etc) in your css folder, you would now manage them differently, to exclude from the scss build process.

And that's about it. As you can see, this actually has nothing to do with Drupal. We also didn't use any ruby.