Angular 19 - Customize Bootstrap theme - Stack Overflow

admin管理员组

文章数量:1221773

I want to customize the Bootstrap theme in my application so I created this file: src/bootstrap.scss and updated the styles value in the angular.json file like this "styles": ["src/styles.scss", "src/bootstrap.scss"].

The bootstrap.scss file have the following content:

// Import Bootstrap's functions and variables
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

// Override Bootstrap variables
$primary: #ff5733; // Change primary color
$secondary: #33c1ff; // Change secondary color

// Import Bootstrap styles
@import "~bootstrap/scss/bootstrap";

When I do ng serve, I always get the following error:

✘ [ERROR] Can't find stylesheet to import.
  ╷
2 │ @import "~bootstrap/scss/functions";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/bootstrap.scss 2:9  root stylesheet [plugin angular-sass]

    angular:styles/global:styles:2:8:
      2 │ @import 'src/bootstrap.scss';
        ╵         ~~~~~~~~~~~~~~~~~~~~

Why? I properly installed bootstrap and ng-bootstrap.

I want to customize the Bootstrap theme in my application so I created this file: src/bootstrap.scss and updated the styles value in the angular.json file like this "styles": ["src/styles.scss", "src/bootstrap.scss"].

The bootstrap.scss file have the following content:

// Import Bootstrap's functions and variables
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

// Override Bootstrap variables
$primary: #ff5733; // Change primary color
$secondary: #33c1ff; // Change secondary color

// Import Bootstrap styles
@import "~bootstrap/scss/bootstrap";

When I do ng serve, I always get the following error:

✘ [ERROR] Can't find stylesheet to import.
  ╷
2 │ @import "~bootstrap/scss/functions";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/bootstrap.scss 2:9  root stylesheet [plugin angular-sass]

    angular:styles/global:styles:2:8:
      2 │ @import 'src/bootstrap.scss';
        ╵         ~~~~~~~~~~~~~~~~~~~~

Why? I properly installed bootstrap and ng-bootstrap.

• angular
• bootstrap-5

Share Improve this question Follow asked Feb 6 at 17:56 RaphaelRaphael 71911 gold badge1212 silver badges2727 bronze badges 1

• 2 try to import ../../node_modules/path_toscss_functions instead ~bootstrap/scss/functions – SergeyChe Commented Feb 6 at 18:29

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Ok. It works like this @import "../node_modules/bootstrap/scss/functions";

本文标签： Angular 19Customize Bootstrap themeStack Overflow