Skip to content
This repository was archived by the owner on Apr 24, 2024. It is now read-only.

Conversation

@KDNeufeld
Copy link

As of Angular 13, tilde imports has been deprecated and removed in the Sass loader. This project no longer works with newer versions of Angular.
ref: angular/components@f2ff9e3

I was getting errors following the directions on the Getting Started documentation.

X [ERROR] Can't find stylesheet to import.                                                                                                                                        
  ╷
4 │ @import "~bootstrap/scss/functions";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules\@bcgov\bootstrap-theme\dist\scss\_common.scss 4:9  @import
  @bcgov\bootstrap-theme\dist\scss\bootstrap-theme.scss 2:9       @import
  src\styles.scss 4:9                                             root stylesheet [plugin angular-sass]

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

I was able to resolve the issue by simply removing the ~ in the path of a few import statements.

styles.scss

$bcgov-font-path: "@bcgov/bootstrap-theme/dist/fonts/";
@import "@bcgov/bootstrap-theme/dist/scss/bootstrap-theme";
@import "@bcgov/bootstrap-theme/dist/scss/common"; 

/* Importing Bootstrap SCSS file. */
@import "bootstrap/scss/bootstrap";

I updated the documentation to reference v1.1.4, hopeful a new release would be made available soon.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants