Skip to content

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.

    Terminal window
    # Using NPM
    npm install -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.

    @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";