Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove WebStorm sass-lint error "Unknown pseudo selector 'ng-deep'"

Angular 2+ with scss and ::ng-deep in WebStorm highlights this selector with text "Unknown pseudo selector 'ng-deep'"

I tried something like:

selector-pseudo-class-no-unknown: true
  ignorePseudoClasses: ng-deep

or

selector-pseudo-class-no-unknown: false

None of this works.

How to set exception in scss-lint.yml for this pseudo-selectors?

like image 653
Adam Michalski Avatar asked Aug 03 '17 19:08

Adam Michalski


People also ask

What's wrong with the ::ng-deep pseudo-Class Selector?

The ::ng-deep pseudo-class selector also has a couple of aliases: >>> and /deep/, and all three are soon to be removed. The main reason for that is that this mechanism for piercing the style isolation sandbox around a component can potentially encourage bad styling practices.

Is there a pseudo selector'ng-deep'in Angular 2+?

Bookmark this question. Show activity on this post. Angular 2+ with scss and ::ng-deep in WebStorm highlights this selector with text "Unknown pseudo selector 'ng-deep'" None of this works.

What is the source file name of the sass or less file?

The file has the name of the source Sass, Less, or SCSS file and the extension .css. The location of the generated files is defined in the Output paths to refresh field of the New Watcher dialog. However, in the Project Tree, they are shown under the source file which is now displayed as a node.

What compilers does WebStorm integrate with?

WebStorm integrates with compilers that translate Sass, Less, and SCSS code into CSS. To use a compiler in WebStorm, you need to configure it as a File Watcher based on the relevant predefined template.


1 Answers

::ng-deep is pseudo element, not pseudo class. This is equivalent in my .stylelintrc

{
  "rules": {
    "selector-pseudo-element-no-unknown": [true, {
      "ignorePseudoElements": ["ng-deep"]
    }]
  }
}

Also you need to uncheck Settings -> Inspections -> CSS -> Invalid Elements -> Invalid CSS pseudo selector

like image 158
Arelav Avatar answered Oct 02 '22 16:10

Arelav