Setup SCSS Config

How to use the configurable SCSS file

It seems that there is currently no way to use the SASS module system directly within Astro files.

Please correct me if this should be different and open a Github issue.

1. Install the SASS Pre-processor

   If already present this is optional.

   npm

     # Using NPM
     npm install -D sass

   pnpm

     # Using PNPM
     pnpm add -D sass

   yarn

     # Using Yarn
     yarn add -D sass

2. Create a new SCSS file

   Create a new SCSS file (for example astro-breadcrumbs-config.scss) in your project and import the astro-breadcrumbs SCSS file. You can then use the SCSS variables to customize the look of your breadcrumbs.

   astro-breadcrumbs-config.scss

   @use "astro-breadcrumbs/breadcrumbs.scss" with (
     /// Your config goes here
     /// $size-font: 12px;
     /// $color-link: rebeccapurple;
   );

3. Import the SCSS file in your Astro file

   ---
   import "../styles/astro-breadcrumbs-config.scss";
   ---