CODEWITHSUNDEEP
javascriptangularangularjsbootstrap-5bootswatch
Mammane Bi
Mammane Bi

Reputation: 41

Add bootswatch in my styles.scss file with Angular 17

here is my styles.css code

/* 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';

and when I launched ng serve, I got these errors what to do I am a beginner on Angular 17.

 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 it does not work

Upvotes: 4

Views: 348

Answers (1)

donald23
donald23

Reputation: 45

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).

Upvotes: 1

Related Questions