diff --git a/app/javascript/packages/build-sass/CHANGELOG.md b/app/javascript/packages/build-sass/CHANGELOG.md index 3633966fa5e..86b50fbdca5 100644 --- a/app/javascript/packages/build-sass/CHANGELOG.md +++ b/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) diff --git a/app/javascript/packages/build-sass/README.md b/app/javascript/packages/build-sass/README.md index 53b6bf3ccf3..5a3a7923731 100644 --- a/app/javascript/packages/build-sass/README.md +++ b/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 diff --git a/app/javascript/packages/build-sass/cli.js b/app/javascript/packages/build-sass/cli.js index 1e514b0c139..a77f6c7d67e 100755 --- a/app/javascript/packages/build-sass/cli.js +++ b/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. diff --git a/app/javascript/packages/build-sass/index.js b/app/javascript/packages/build-sass/index.js index df99996fc53..cad1aae6e76 100644 --- a/app/javascript/packages/build-sass/index.js +++ b/app/javascript/packages/build-sass/index.js @@ -27,11 +27,11 @@ const TARGETS = browserslistToTargets( * @return {Promise} */ 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, });