search

bcgov / bootstrap-theme

The new home for the new bootstrap v4 themed BC Gov. look-and-feel
https://bcgov.github.io/bootstrap-theme/
Apache License 2.0
17 stars 17 forks source link

Removed deprecated tilde in imports #38

Open KDNeufeld opened 7 months ago

KDNeufeld commented 7 months ago

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: https://github.com/angular/components/commit/f2ff9e31425f0e395e6926bcaf48f876688000d8

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.