When I attempt to customize USWDS settings by editing gulpfile.js to configure path settings (e.g., uswds.paths.dist.img), it causes an error because the path specified is not used.
Steps to reproduce the bug
Install USWDS and USWDS Compile
Run npx gulp init to install the initial USWDS Compile files, initially not changing any paths and test. You should see no errors in the developer console, and the images rendered and appropriate fonts used.
mkdir uswds-test
cd uswds-test
npm init -y
npm install express --save
npm install @uswds/uswds --save
npm install @uswds/compile --save-dev
vi gulpfile.js
npx gulp init
vi index.html
vi server.js
node server.js
Then delete any generated files (assets and sass) and try changing the paths to differ from the default generated paths, run npx gulp init again, update the path to styles.css in index.html, and re-test. You will see errors in the browser console where the images, fonts etc are not found due to uswds looking for them in unexpected places.
Examples
Use something other than img for the dist.img path
// generates where specified but fails
// (looks for images in src/assets/uswds/img)
uswds.paths.dist.theme = './src/sass/uswds';
uswds.paths.dist.img = './src/assets/uswds/images';
uswds.paths.dist.fonts = './src/assets/uswds/fonts';
uswds.paths.dist.js = './src/assets/uswds/js';
uswds.paths.dist.css = './src/assets/uswds/css';
Use something other than fonts for the dist.font path
// generates where specified but fails
// (looks for fonts in src/assets/uswds/fonts)
uswds.paths.dist.theme = './src/sass/uswds';
uswds.paths.dist.img = './src/assets/uswds/img';
uswds.paths.dist.fonts = './src/assets/uswds/font';
uswds.paths.dist.js = './src/assets/uswds/js';
uswds.paths.dist.css = './src/assets/uswds/css';
Use only the two settings given in the documention as an example, with a slight change to use src since frameworks do not allow serving content outside of the src dir.
// generates
// assets/uswds/{fonts,img,js}
// src/assets/uswds/css
// src/sass/uswds
//
// But fails to load fonts (expects them to be in src/assets/uswds/fonts)
uswds.paths.dist.css = './src/assets/uswds/css';
uswds.paths.dist.theme = './src/sass/uswds';
I did not try changing dist.js or dis.css to other endings, but you get the idea.
Expected Behavior
The paths specified in gulpfile.js are used and work.
Test files used
gulpfile.js
/**
* Import uswds-compile
*/
const uswds = require("@uswds/compile");
/**
* USWDS version
* Set the major version of USWDS you're using
* (Current options are the numbers 2 or 3)
*/
uswds.settings.version = 3;
/**
* Path settings
* Set as many as you need
*/
//uswds.paths.dist.css = './assets/css';
//uswds.paths.dist.theme = './sass/uswds';
/**
* Exports
* Add as many as you need
*/
exports.init = uswds.init;
exports.compile = uswds.compile;
exports.watch = uswds.watch;
Describe the bug
When I attempt to customize USWDS settings by editing gulpfile.js to configure path settings (e.g., uswds.paths.dist.img), it causes an error because the path specified is not used.
Steps to reproduce the bug
Install USWDS and USWDS Compile Run
npx gulp init
to install the initial USWDS Compile files, initially not changing any paths and test. You should see no errors in the developer console, and the images rendered and appropriate fonts used.Then delete any generated files (assets and sass) and try changing the paths to differ from the default generated paths, run
npx gulp init
again, update the path to styles.css in index.html, and re-test. You will see errors in the browser console where the images, fonts etc are not found due to uswds looking for them in unexpected places.Examples
Use something other than
img
for the dist.img pathUse something other than
fonts
for the dist.font pathUse only the two settings given in the documention as an example, with a slight change to use
src
since frameworks do not allow serving content outside of the src dir.I did not try changing dist.js or dis.css to other endings, but you get the idea.
Expected Behavior
The paths specified in gulpfile.js are used and work.
Test files used
gulpfile.js
index.html
server.js