Nested scss not working properly as expected

Asked Apr 12 '19 at 07:18

Active Apr 12 '19 at 07:18

Viewed 320 times

I am having an issue while nesting a import in a class like

.base-class-xirLd4a709  {
  @import 'semantic.css';
  .deal-icon {
    vertical-align: top;
    height: 30px;
    margin: 5px 0px 0px 5px;
  }
}

Imported css is effecting outside of parent class and effecting the whole page. How to make it block scope?

asked Apr 12 '19 at 07:18

Danish

This should happen automatically if you are compiling the file into the standard CSS. Did you inspect the resultant code? – wOxxOm Apr 12 '19 at 08:19
Yes i am compiling the code to css using sass-loader and webpack. – Danish Apr 12 '19 at 10:07
And what is the actual compiled code of the posted fragment? – wOxxOm Apr 12 '19 at 10:53

0 Answers0