How come I'm getting unexpected name or hex number error?

Question

I'm wondering why I can't add background-color: red; property on my scss file:

#my_container {
    background-color: red; # Added this line and #efefef doesn't work either

Error print on Grunt:

src/sass/app_2/_common/layout/layouts.scss:7:27
  ✖  7:27  Unexpected named color red  color-named

It might be an error coming from Styelint or compiler. Please let me know if you need any detail.

Answer 1

That error comes from Stylelint because you have a rule that disables named colors: https://stylelint.io/user-guide/rules/color-named/