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

Question

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

style.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');

variables.less 和 mixins.less 没有在 CSS 中编译的地方我不知道缺少什么，它们中应用了嵌套规则可能是它们出错了，因为我听说需要一个配置文件在导入和用于纯 CSS 时处理嵌套变量和混合。我无法找到解决方案，非常感谢您的帮助。非常感谢。

Answer 1

这是我对 Web Essentials LESS 编译器的设置:

选项 > 网络要素 > 更少

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 之后的版本中出现错误，导致预编译器出现问题。我不知道他们是否已更新修复程序。