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

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

1 Answer 1

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