How To: Add shared dependencies

Adding shared CSS dependencies to the GEF documentation

When building a new component documentation page, add a SCSS file to the following folder, for example:

src/_includes/scss/components/_gef-mynewcomponent.scss

All SCSS files in src/_includes/scss/components will then get compiled into a single CSS output file.

npm run sass && npm run build

The generated output can be included in a web page like so:

<link rel="stylesheet" type="text/css" href="{{site.basedir}}static/css/gef.css">

When building a new component documentation page, add a JS file to the following folder, for example:

src/_includes/js/components/gef-mynewcomponent.js

All src JS files in src/_includes/js/components will then get compiled into a single JS output file.

npm run js && npm run build

The generated output can be included in a web page like so:

<script type="text/javascript" src="{{site.basedir}}static/js/gef.js"></script>