LESS @import 和 Web Essentials 2012

Question

在我的 Web 项目中，出于维护原因，我将 CSS 拆分为单独的 LESS 文件。我有一个名为 config.less 的文件，它充当主文件，使用 @import 指令导入其他 less 文件。

这个设置的问题似乎是我在编辑我的 LESS 文件时得到了很多“未声明的变量”和“未声明的混合”，例如在 base.less 中添加一个名为 @textColor 的属性变量时，该变量在另一个 less 中声明名为 variables.less 的文件。有什么方法可以让 Web 要素知道在外部 less 文件中定义的变量和 mixin？

另一件似乎让 Web Essentials 陷入困境的事情是，当我使用 LESS 的嵌套媒体查询功能时:

.some-selector {
    background: #000;
    @media only screen and (max-width: 800px) {
        background: #fff;
    }
}

嵌套的@media 声明带有红色下划线，悬停时显示“样式规则中出现意外的‘@’块”。将鼠标悬停在嵌套的背景属性上会显示“验证:‘颜色’不是有效的 HTML 标记。

Answer 1

我无法给出有关 @media 的答案Web Essentials 的问题，但我可以就变量和混合问题提供建议。

基本上，改变你的 config.less文件具有 variables.less和任何其他混合文件是 @import-once ，然后还要添加 @import-once 'variables.less进入使用其中变量的每个文件(对使用的任何混合文件执行相同操作)。

如果您正在处理该文件(例如您的 base.less )，则这样做是导入文件，但是当所有文件都由 config.less 编译时，它只会导入 variables.less一次，对于每个也引用 variables.less 的文件，不再重复一次。 .