CODEWITHSUNDEEP
urlimportsassfonts
Rohan Khajuria
Rohan Khajuria

Reputation: 726

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

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?

Upvotes: 8

Views: 2958

Answers (1)

querkmachine
querkmachine

Reputation: 152

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.

Upvotes: 7

Related Questions