Question 135927 in Visual Studio Code Question posted in
View the official documentation.

Visual Studio Code – scss – Usage of '~' in imports is deprecated – angular – vscode

Since angular 13, using a tilde (~) to import SCSS files from the node_modules

close.component.scss

:host ::ng-deep {
    // Configuration
    @import "~bootstrap/scss/functions";
    @import "~bootstrap/scss/variables";
    @import "~bootstrap/scss/mixins";

    // Layout & components
    @import "~bootstrap/scss/close";
}

results in the following warning after running ng build:

Warning: ‘C:repos…srclibcomponentscloseclose.component.scss’ imports ‘~bootstrap/scss/close’ with a tilde. Usage of ‘~’ in imports is deprecated.

Changing this and removing the tilde is easy. But VS Code doesn’t find the file anymore when
ctrl clicking the scss-path. It thinks it’s located at

C:repos...srclibcomponentsclosebootstrapscssclose

I’ve already tried this change but it changes nothing.

Does anyone know how to fix this?

Edit

For those wondering why we need :host ::ng-deep around the @import statements, it scopes the styles within to the component. A good example here is the bs-list-group and bs-list-group-item which I use like this:

<bs-list-group>
    <bs-list-group-item>Cras justo odio</bs-list-group-item>
    <bs-list-group-item>Dapibus ac facilisis in</bs-list-group-item>
    <bs-list-group-item>Morbi leo risus</bs-list-group-item>
    <bs-list-group-item>Porta ac consectetur ac</bs-list-group-item>
    <bs-list-group-item>Vestibulum at eros</bs-list-group-item>
</bs-list-group>

The following scss imports in list-group.component.scss

// Configuration
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

// Layout & components
@import "~bootstrap/scss/list-group";

Result in the following

Bootstrap listview with scoped styles

On the other hand:

:host ::ng-deep {
    // Configuration
    @import "~bootstrap/scss/functions";
    @import "~bootstrap/scss/variables";
    @import "~bootstrap/scss/mixins";

    // Layout & components
    @import "~bootstrap/scss/list-group";
}

Where ng-deep removes the component scopes, and :host is replaced with the attribute angular applies on the BsListViewComponent (in this case [_nghost-bkg-c64]). This lets the styles work for the entire BsListviewComponent, since the scopes were removed from the css selectors.

Bootstrap listview with stripped scopes

This actually DOES work…

Tags:

2

Answers


  1. 0

    You have to replace with the path to the css, something like :

    @import node_modules/bootstrap/scss/mixins'

    Before to do that, I recommande you to go on the bootstrap file that you want to import and get the relative path to the file.

    The in your scss file replace the ~ path with the relative path.

    Becarful to not include .scss file inside the path.

    Login or Signup to reply.
  2. 0

    1. In angular.json file

    2. Add this below build -> options:

    "stylePreprocessorOptions": {
   // other options...
   "includePaths": [
     "./node_modules"
   ]
 }
    1. Remove ~ in every import

    Take this warning with a grain of salt: It might be better to explicitly use the node_modules/ prefix instead, especially if more than one person is working on this project.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search