Howdy! In sass, you can use sass-loader with Webpack to resolve Sass imports from node modules. This can look something like the following:
@import 'npm-package/stylesheet'
// etc
This should resolve to node_modules/npm-package/stylesheet.scss. Unfortunately, cabinet + sass-lookup doesn't quite handle this use case. You can get it to resolve using just cabinet, by passing node_modules as a directory, but dependency tree doesn't accept multiple directories in general, so that won't work for our use case. I was wondering what a good path would be towards implementing support.
A really naive implementation could be something like this as the lookup function for sass in cabinet.
function sassResolver(options) {
let { directory } = options;
if (typeof directory === 'string') {
directory = [ directory ];
}
directory.push( 'node_modules' );
return sassLookup({ ...options, directory })
}This does work, but it wouldn't be able to handle different node_modules locations, such as in monorepos. One could also add a custom resolver like this: https://github.com/Automattic/wp-calypso/blob/6ef9f9278aaf368cd629ba69c33c4768dc7ea08d/bin/render-stylesheet.js#L16-L23. But I'm not sure where exactly to put that -- would the sass-lookup package be a good fit?
What are your thoughts?
Howdy! In sass, you can use
sass-loaderwith Webpack to resolve Sass imports from node modules. This can look something like the following:This should resolve to
node_modules/npm-package/stylesheet.scss. Unfortunately, cabinet + sass-lookup doesn't quite handle this use case. You can get it to resolve using just cabinet, by passingnode_modulesas a directory, but dependency tree doesn't accept multiple directories in general, so that won't work for our use case. I was wondering what a good path would be towards implementing support.A really naive implementation could be something like this as the lookup function for sass in cabinet.
This does work, but it wouldn't be able to handle different node_modules locations, such as in monorepos. One could also add a custom resolver like this: https://github.com/Automattic/wp-calypso/blob/6ef9f9278aaf368cd629ba69c33c4768dc7ea08d/bin/render-stylesheet.js#L16-L23. But I'm not sure where exactly to put that -- would the sass-lookup package be a good fit?
What are your thoughts?