Less CSS Import Problem_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-08 06:25 出处：网络

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

相关专题：css less

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 struct开发者_Go百科ure.

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!

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.

LESS uses css syntax so you need the file extension:

@import "color.less";

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

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.

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.

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.