I have SCSS files set up to compile to a single css file, using Gulp.

I have a main.scss file which handles imports of various libraries. It looks like this:

@import "theme_variables.scss";
@import "node_modules/bootstrap/scss/bootstrap";
@import "node_modules/@fortawesome/fontawesome-free/scss/brands";
@import "node_modules/@fortawesome/fontawesome-free/scss/fontawesome";

@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400&display=swap");

* {
    font-family: 'Source Sans Pro', sans-serif;
}

h1>span.underline {
    border-bottom: 5px solid #fff;
}

footer {
    .sub-footer a, .sub-footer a:hover, .sub-footer a:visited {
        color: $secondary;

        &:hover {
            text-decoration: underline;
        }
    }
}

This file is then compiled down to all.css, which starts like this:

/*!
 * Bootstrap v4.5.0 (https://getbootstrap.com/)
 * Copyright 2011-2020 The Bootstrap Authors
 * Copyright 2011-2020 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400&display=swap");:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c; ...

I'm then referencing all.css using Client Dependency:

Html.RequiresCss("~/dist/css/all.css", -1);

However, when I think look at the resulting file, I can see that the Google font file is being referenced twice:

@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400&display=swap");
/*!
* Bootstrap v4.5.0 (https://getbootstrap.com/)
* Copyright 2011-2020 The Bootstrap Authors
* Copyright 2011-2020 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400&display=swap");:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;

You'll see that it's importing the font file twice.

In addition to this, I have an error where a Google font with different weights is causing Client Dependency to break. When I do this, the reference looks like this:

@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap");

When I include the extra font-weight, ClientDependency breaks on the semi-colon between 400 and 700, and results in this:

@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;
/*!
* Bootstrap v4.5.0 (https://getbootstrap.com/)
* Copyright 2011-2020 The Bootstrap Authors
* Copyright 2011-2020 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap");:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;

I feel like it's a configuration issue somewhere, but I cannot find a solution.