CODEWITHSUNDEEP
angularvisual-studio-codesass
Pieterjan
Pieterjan

Reputation: 3531

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\...\src\lib\components\close\close.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\...\src\lib\components\close\bootstrap\scss\close

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...

Upvotes: 40

Views: 27821

Answers (2)

RomainG
RomainG

Reputation: 597

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

@import 'node_modules/bootstrap/scss/mixins'

Before doing that, I recommend going to 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.

Be careful to not include .scss file inside the path.

Upvotes: 10

irwin
irwin

Reputation: 521

  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.

Upvotes: 52

Related Questions