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

Removed deprecated tilde in imports #38

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

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