Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Ant 8 posts 79 karma points
    Jun 23, 2020 @ 14:38
    Ant
    0

    Client Dependency duplicating Google Fonts reference

    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.

Please Sign in or register to post replies

Write your reply to:

Draft