Add bootswatch in my styles.scss file with Angular 17

Question

Here is the code in my styles.css file:

/* You can add global styles to this file, and also import other style files */

/* Importing Bootstrap SCSS file. */
@import 'bootswatch/dist/cyborg/variables';
@import 'bootstrap/scss/bootstrap';
@import 'bootswatch/dist/cyborg/bootswatch';

When I executed ng serve, I got these errors:

X [ERROR] Could not resolve "../node_modules/bootswatch/dist/cyborg||file:https://      fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"

        src/styles.scss:9:12:
          9 │ @import url("../node_modules/bootswatch/dist/cyborg||file:https://f...
            ╵             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Watch mode enabled. Watching for file changes...

I carefully examined the path node_modules/bootswatch/dist/cyborg/variables. I made sure that there are no typos and that the directory structure exists in the node_modules folder of my project. I even restarted npm install bootswatch, but it does not work.

Answer 1

I ran into this exact same issue with Angular 18. After trying several different approaches (switching from " to ' f.e., removing the conditional part and just importing the font URL), which all didn't work.

New (better sustainable) solution

Instead of altering the file in the NPM package, I added the following to my styles.scss at the very top:

$my-own-font: 'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,400&display=swap' !default;
@import url($my-own-font);

$web-font-path : false;

This ensures the loading of the correct font (manual update needed if you switch themes and want the font going with your new theme!), while also disabling the font that is included in _bootswatch.scss.

Old solution

I then solved it by commenting out this part in _bootswatch.scss file (this is from the 'Lumen' theme, depending on theme, the actual font-url will look different):

$web-font-path: "https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,400&display=swap" !default;
@if $web-font-path {
    @import url("#{$web-font-path}");
}

and copy-pasting that in my styles.scss at the top (so before I included the other files).