Using sass includePaths in a monorepo
Gets tricky since there can now be multiple node_modules
20 January 2023
Web development
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 🎉