Less CSS Import Problem

Question

Im dealing here with Less CSS. Everythings was going fine, but im getting a little bug now. I have two less files. The first is called "colors.less" where i declared the colors vars, and the second is the css structure.

Its something like this:

color.less

@black: #000;

styles.less

@import "color";

body {
    background: @black;
}

In my head tag, im writing it:

<link rel="stylesheet/less" type="text/css" href="less/styles.less"/>

And of course, importing the less js.

Whats happening is when i change the black color to White (#fff), it dont change to white. Stills black. When i reverse the logic, import the styles inside of color, it changes, but my styles dont change.

What im doing wrong?

Thanks guys!

Answer 1

Use

@import "color.less";

This probely solve you problem. If this don´t fix the issue try use a red color in you color.less cause if the you browser default color is black you will not see if the style ins´t loaded.

PS: Check your file names like color.less or colorS.less.