Feo is distributed as an NPM package through the NPM Registry. In can be added to your project by using
npm install @crinkles/feo yarn add @crinkles/feo
Depending on the type of project you are running, Feo can be added in several different ways to your project. In all cases, the Feo file needs to be imported into your own
.scss file. The first method is to use the
@import function of SCSS.
$feo-colors: (...); // Import via relative paths @import '../../path/to/node_modules/@crinkles/feo/feo.scss'; @import '~@crinkles/feo/feo.scss';
The second method is to use the newer
@use of SCSS. This allows you to define and use feature flags of Feo. When using the
with structure, ensure your SCSS variables are defined in the same file. Importing another file before
@use statements is disallowed by SCSS.
$colors: (...); @use '../../path/to/node_modules/@crinkles/feo/feo.scss'; @use '~@crinkles/feo/feo.scss'; @use '../../path/to/node_modules/@crinkles/feo/feo.scss' with ( $feo-colors: $colors );
This method does not work when you use the (deprecated)
node-sassmodule to parse your SCSS. You have to use the newer
sassmodule. In most projects you can easily swap