Adding panel-heading:hover class in bootstrap less does not change the hover color

I have added the following lines to bootstrap/less/panels.less

//hover color for panel heading
.panel-heading:hover {
  background-color: #dfdfdf;
}

But it wouldn't load to the css in the browser. yet I can manually add it in the css editor (in chrome dev tools) and it works.

Any solutions ?