减少 CSS 导入问题

发布于 2024-11-09 14:49:42 字数 568 浏览 2 评论 0原文

我在这里处理的是Less CSS。一切都很顺利,但我现在遇到了一个小错误。 我少了两个文件。第一个称为“colors.less”,我在其中声明了颜色变量,第二个是 css 结构。

它是这样的:

color.less

@black: #000;

styles.less

@import "color";

body {
    background: @black;
}

在我的 head 标签中,我写的是:

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

当然,还要导入 less js。

发生的情况是,当我将黑色更改为白色(#fff)时,它不会更改为白色。剧照黑色。当我反转逻辑,导入颜色内部的样式时,它会改变,但我的样式不会改变。

我做错了什么?

谢谢你们!

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!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

↘紸啶 2024-11-16 14:49:42

使用

@import "color.less";

这可能会解决你的问题。如果这不能解决问题,请尝试在您的 color.less 中使用红色。因为如果您的浏览器默认颜色是黑色,您将看不到样式是否未加载。

PS:检查您的文件名,例如 color.less 或 colorS.less。

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.

末蓝 2024-11-16 14:49:42

LESS 使用 css 语法,因此您需要文件扩展名:

@import "color.less";

http://www.w3.org/TR /css3-语法/

LESS uses css syntax so you need the file extension:

@import "color.less";

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

以可爱出名 2024-11-16 14:49:42

您可以在主样式表中使用颜色而不引用第二个吗?

然后你可以跳过@import

另外,我会为样式规则选择另一个名称。如果您决定更改颜色,您的规则名称将没有意义。

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.

猫七 2024-11-16 14:49:42

我不知道可能导致此问题的原因,但请尝试像这样引用 -tag 中的两个文件:

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

然后还将您的 style.less 更改为不要 import color.less 因为您已经在 标签中执行此操作。

顺便说一句:我不会调用颜色 @black,这可能会导致稍后更改颜色时出现混乱,尝试使用更具描述性的名称,例如 @mainBackgoundColor 来代替获得可读性好的代码。

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.

春庭雪 2024-11-16 14:49:42

无论您导入什么文件,都必须具有 .css 扩展名。只有包含或检索文件才能具有 .less 扩展名。

在您的示例中,颜色文件应具有 .css 扩展名,而不是 .less。这应该可以解决你的问题。

**更新
可以在 Chrome 中使用,不能在 Firefox 中使用
??诡异的。

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文