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!

Julian H. Lam · Accepted Answer · 2013-06-11 16:15:55Z

5

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.

edited Jun 11, 2013 at 16:15

Julian H. Lam

26.3k13 gold badges51 silver badges74 bronze badges

answered May 26, 2011 at 17:39

Necrower

1056 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ben Over a year ago

Should have a semi-colon on the end but I'm just being picky.

James A Mohler Over a year ago

You can also @import "color.css";

Ben · Accepted Answer · 2012-08-27 08:45:52Z

2

LESS uses css syntax so you need the file extension:

@import "color.less";

http://www.w3.org/TR/css3-syntax/

answered Aug 27, 2012 at 8:45

Ben

4,4016 gold badges40 silver badges62 bronze badges

Comments

Jason Gennaro · Accepted Answer · 2011-05-24 17:29:42Z

0

Could you have the color within the main stylesheet and not reference the second sheet?

Then you could skip the @import.

Also, I would pick another name for the style rule. If you decide to change the color, your rule name will not make sense.

answered May 24, 2011 at 17:29

Jason Gennaro

34.9k9 gold badges67 silver badges86 bronze badges

1 Comment

Lucas Veiga Over a year ago

Im using LESS because i need my style dynamic. The user will set the colors on admin, and these colors will be saved on the color.less file. About the rule name, i tried it, i've put another name and didnt work too.

Ahti · Accepted Answer · 2011-05-24 17:53:59Z

0

I don't know what could be causing this, but try referencing both files in yout <head>-tag like this:

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

And then also change your style.less to not import color.less since you're doing that in your <head>-tag already.

Btw: I wouldn't call the color @black, this may lead to confusion when changing the color later on, try to use more descriptive names like @mainBackgoundColor instead, to get code that reads well too.

answered May 24, 2011 at 17:53

Ahti

1,4301 gold badge11 silver badges22 bronze badges

1 Comment

Ahti Over a year ago

@Lucas : another idea: try using @import "./color.less"; (or "./color" if you prefer it), i just used this to import sth a minute ago and it worked flawlessly also, when you update one of the imported files, update the importing one as well (just add a space somewhere or sth), i think less may be doing some caching or sth under the hood.

Jeremiah · Accepted Answer · 2012-05-02 15:02:51Z

-6

Whatever file you are importing has to have a .css extension. Only the containing, or retrieving, file can have the .less extension.

In your example, the color file should have a .css extension instead of .less. This should fix you right up.

**Update Worked in Chrome, not in Firefox ?? Weird.

edited May 2, 2012 at 15:02

answered May 2, 2012 at 14:49

Jeremiah

11 bronze badge

Collectives™ on Stack Overflow

Less CSS Import Problem

5 Answers 5

2 Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related