0

I have an Angular web app and bunch of classes with double dashes in names (e.g. --loaded or --primary). Once I build my application, the such classes are not escaped with backslashes which causes problems in IE11 and Edge 14.

For example, such SCSS code

.graph-placeholder
  opacity: 0
  transition: 0.2s opacity

  &.--loaded
   opacity: 1

is compiled to this 

.graph-placeholder.--loaded {
  opacity: 1; 
}

instead of 

.graph-placeholder.\--loaded {
  opacity: 1; 
}

This is handled by Chrome or Edge 16 but not IE11 or older versions Edge.

How can I make Angular CLI to compile SCSS files correctly?

Package versions:

@angular/animations@5.2.1
@angular/cli@1.7.3
@angular/common@5.2.1
@angular/compiler@5.2.1
@angular/compiler-cli@5.2.1
@angular/core@5.2.1
@angular/forms@5.2.1
@angular/http@5.2.1
@angular/platform-browser@5.2.1
@angular/platform-browser-dynamic@5.2.1
@angular/platform-server@5.2.1
@angular/router@5.2.1
typescript@2.6.2
Azimuth
  • 2,599
  • 4
  • 26
  • 33
  • It looks like a class name should not start with two hyphens in the first place. https://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors – Lorenz Meyer Apr 13 '18 at 16:39
  • The scss compiler might be correct in not compiling such class names correctly :) – Lorenz Meyer Apr 13 '18 at 16:40
  • It might be so but this is an existing project with lots of classes with double dashes and it was working till some point. – Azimuth Apr 13 '18 at 16:47

0 Answers0