Introduction

When using Fontsource in a Sass/SCSS project, you will need to configure your Sass compiler to resolve the pkg: import directive to resolve the font stylesheets from the NPM package.

Configuration

It is required to use Dart Sass v1.71.0 or later to resolve the pkg: import directive.

Command Line

If you are using the command line to compile your Sass files, you can use the --pkg-importer=node flag to resolve the imports. Here’s an example of how to compile a Sass file using the command line flag:

sass --pkg-importer=node style.scss style.css

JavaScript API

If you are using the JavaScript API to compile your Sass files, you can use the NodePackageImporter() to resolve the imports. Here’s an example of how to configure the Sass compiler:

const sass = require('sass');

sass.compileString('@use "pkg:@fontsource-variable/roboto', {
  importers: [new sass.NodePackageImporter()]
});

Direct URLs

If you cannot use the pkg: import directive, you can still import the Fontsource stylesheets using the direct URI to the CSS file. Here’s an example of importing the Open Sans font using the direct URL:

// Adjust path as necessary.
@use "../node_modules/@fontsource-utils/src/mixins.scss" as fontsource;
@use "../node_modules/@fontsource-variable/recursive/scss/metadata.scss" as recursive;

Usage

Once configured, you can import Fontsource stylesheets using the @use rule in your Sass/SCSS files.

• Import Stylesheets

For more advanced usage, you can use the mixins to generate a highly customizable CSS file for your font.

• Faces Mixin
• Generator Mixin