How do I use @use a Google font URL in Sass?

user_1218257 0
Viewed 909

Given the new module system in SASS (https://sass-lang.com/blog/the-module-system-is-launched) and their plans on phasing out @import, I'm changing my @imports to @uses. I've been successful in most cases, but I've run into one hiccup: I currently use @import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap') to import the Montserrat typeface into my code, and I don't know how to accomplish this with @use. I've tried the following:

@use url('https://fonts.googleapis.com/css?family=Montserrat&display=swap')

@use "url('https://fonts.googleapis.com/css?family=Montserrat&display=swap')"

@use 'https://fonts.googleapis.com/css?family=Montserrat&display=swap'

All of those give me a SASS compilation error. How do I use @use in this case?

sass import fonts url
1 Answers

The replacement of @import for @use/@forward is specifically so that the Sass version of the import function no longer shares custody with the vanilla CSS version of it.

In this instance, you're trying to use the vanilla functionality, so @import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap') is the correct syntax to use.

user_33432150
Related