reactjsless

Why isn't this CSS rule being applied?


I want all the text fonts to use Roboto by default, but also for one specific class to use Roboto Thin. Here is my code so far:

mixins.less

* {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

fast-payment.less

@import (reference) '../../content/less/mixins';
.bss-fast-payment {
  &__header {
    .useAlsSectorFont();
  }
}

Chrome DevTools

Google Chrome DevTools.


Solution

  • I think I finally found out how to do it. The only thing I changed was to put bss-fast-payment__header .

    mixins.less

    * {
          font-family: 'Roboto', sans-serif;
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
    

    fast-payment.less

    @import (reference) '../../content/less/mixins';
    .bss-fast-payment {
      &__header * {
        .useAlsSectorFont();
      }
    }
    

    Result

    enter image description here