build-sass: Add CLI flag for additional load paths

app/javascript/packages/build-sass/CHANGELOG.md

@@ -3,6 +3,7 @@
 ### Improvements
 
 - Improves watch mode error recovery to monitor changes to all files in the stack trace of the error.
+- Adds support for `--load-path=` flag to include additional default paths in Sass path resolution.
 
 ## 1.0.0 (2022-11-21)
 

app/javascript/packages/build-sass/README.md

@@ -22,13 +22,14 @@ Default behavior includes:
 Invoke the included `build-sass` executable with the source files and any relevant command flags.
 
 ```
-npx build-sass path/to/sass/*.css.scss --out-dir=build
+npx build-sass path/to/sass/*.css.scss --out-dir=build --load-path=node_modules/@uswds/uswds/packages
 ```
 
 Flags:
 
 - `--out-dir`: The output directory
 - `--watch`: Run in watch mode, recompiling files on change
+- `--load-path`: Include additional path in Sass path resolution
 
 ### API
 

app/javascript/packages/build-sass/cli.js

@@ -20,9 +20,12 @@ const flags = args.filter((arg) => arg.startsWith('-'));
 
 const isWatching = flags.includes('--watch');
 const outDir = flags.find((flag) => flag.startsWith('--out-dir='))?.slice(10);
+const loadPaths = flags
+  .filter((flag) => flag.startsWith('--load-path='))
+  .map((flag) => flag.slice(12));
 
 /** @type {BuildOptions & SyncSassOptions} */
-const options = { outDir, optimize: isProduction };
+const options = { outDir, loadPaths, optimize: isProduction };
 
 /**
  * Watches given file path(s), triggering the callback on the first change.

app/javascript/packages/build-sass/index.js

@@ -27,11 +27,11 @@ const TARGETS = browserslistToTargets(
  * @return {Promise<CompileResult>}
  */
 export async function buildFile(file, options) {
-  const { outDir, optimize, ...sassOptions } = options;
+  const { outDir, optimize, loadPaths = [], ...sassOptions } = options;
   const sassResult = sass.compile(file, {
     style: optimize ? 'compressed' : 'expanded',
     ...sassOptions,
-    loadPaths: ['node_modules'],
+    loadPaths: ['node_modules', ...loadPaths],
     quietDeps: true,
   });