Using sass includePaths in a monorepo

Given the following code:

import sass from 'node-sass'

export const getCSSString = (
  file = 'src/styles/main.scss',
  config: Partial<Parameters<typeof sass.renderSync>[0]>
): string =>
  sass
    .renderSync({
      file,
      includePaths: ['node_modules'],
      outputStyle: 'compressed',
      sourceMap: false,
      ...config,
    })
    .css.toString()

This code may have worked perfectly when your library lived in its own little repo. But now that you’ve put that library into a monorepo where there are nested folders and multple node_modules, things start to break.

A quick win may be to use the path module, and add entries:

import sass from 'node-sass'
import path from 'path'

export const getCSSString = (
  file = 'src/styles/main.scss',
  config: Partial<Parameters<typeof sass.renderSync>>
): string =>
  sass
    .renderSync({
      file,
      includePaths: [
        path.resolve(__dirname, '../../node_modules'),
        path.resolve(__dirname, '../../../../node_modules'),
      ],
      outputStyle: 'compressed',
      sourceMap: false,
      ...config
    })
    .css.toString()

Woohoo 🎉