减少 CSS 导入问题
我在这里处理的是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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
使用
这可能会解决你的问题。如果这不能解决问题,请尝试在您的 color.less 中使用红色。因为如果您的浏览器默认颜色是黑色,您将看不到样式是否未加载。
PS:检查您的文件名,例如 color.less 或 colorS.less。
Use
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 使用 css 语法,因此您需要文件扩展名:
http://www.w3.org/TR /css3-语法/
LESS uses css syntax so you need the file extension:
http://www.w3.org/TR/css3-syntax/
您可以在主
样式表
中使用颜色
而不引用第二个表
吗?然后你可以跳过
@import
。另外,我会为样式规则选择另一个名称。如果您决定更改颜色,您的规则名称将没有意义。
Could you have the
color
within the mainstylesheet
and not reference the secondsheet
?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.我不知道可能导致此问题的原因,但请尝试像这样引用
-tag 中的两个文件:
然后还将您的
style.less
更改为不要 importcolor.less
因为您已经在标签中执行此操作。
顺便说一句:我不会调用颜色
@black
,这可能会导致稍后更改颜色时出现混乱,尝试使用更具描述性的名称,例如@mainBackgoundColor
来代替获得可读性好的代码。I don't know what could be causing this, but try referencing both files in yout
<head>
-tag like this:And then also change your
style.less
to not importcolor.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.无论您导入什么文件,都必须具有 .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.