多个 LESS 文件使用嵌套变量和单个 CSS 文件的混合导入

Question

我要求清理应用程序 head 部分中引用的 LESS 库和样式文件，以实现冗余和减少加载时间。样式文件基本上是style.less文件，它包含所有其他较少的文件，我需要提出一个可以是样式的CSS文件.css所以一切都很好，就像我获得CSS输出作为样式一样.css但是有几个文件没有在CSS中编译和更改。下面是 style.less 与其他导入的 less 文件的预览。

风格内容

@import url('variables.less');
@import url('mixins.less');
@import url('base.less');
@import url('kendo.less');
@import url('header.less');
@import url('navigation.less');
@import url('lists.less');
@import url('treeview.less');

在变量.less和mixins.less没有在CSS中编译的地方，我不知道缺少

什么，其中应用了嵌套规则可能是它们犯了错误，因为我听说需要一个配置文件来处理嵌套的变量和mixins导入并用于普通CSS。我无法找到解决方案，您的帮助将不胜感激。非常感谢。

Answer 1

以下是我对 Web Essentials LESS 编译器的设置：

> WEB 要点的选项>更少

Auto-compile dependent files on save: TRUE
Compile files on build: TRUE
Compile files on save: TRUE
Create source map files: TRUE
Custom output directory: _PATH_TO_OUTPUT_YOUR_ONE_CSS_FILE
Don't save raw compilation output: FALSE
Process source maps: TRUE
Strict Math: FALSE
Show Preview Pane: TRUE

除了主导入 LESS 文件之外的所有 LESS 文件都应以"_"为前缀。 所以例如：

_base.less
_variables.less
style.less (holds the imports for base and variables).

确保您使用的是 Web Essentials 版本 2.5。 2.5 之后的版本出现错误，导致预编译器混乱。 我不知道他们是否已经更新了修复程序。