如何使用lessc编译.less文件

Posted 2023-03-16

参考技术A 如何使用lessc编译.less文件
你应该定义一个自定义类。//类似这样的.auto()margin:0auto;你那个是css类应该就显示出来了编译后。

LESSC 将包含的文件编译成 CSS

【中文标题】LESSC 将包含的文件编译成 CSS

【英文标题】：LESSC Compiling Included Files Into CSS

【发布时间】：2017-03-21 07:07:58

【问题描述】：

我的文件结构如下：

--public_html/
  - css/
  - less/
    - _mixins.less
    - _variables.less
    - _theme.less
    - main.less

我正在使用 PhpStorm 和一个从 NPM 运行 LESSC 的文件观察器。

我的文件观察器如下：

Program: /usr/local/bin/lessc
Arguments: --no-color $FileName$
Output paths to refresh: ../$FileNameWithoutExtention$.css

文件：

main.less:

@import "_variables.less";
@import "_mixins.less";
@import "_theme.less";

_theme.less 包含我的样式表，_variables.less 和 _mixins.less 都很容易解释。

当我修改并保存main.less 时，main.css 文件会按原样在css 文件夹中创建。

但是，当我编辑 _theme.less 文件时，LESSC 也会创建一个 _theme.css 文件。

如何停止创建这些额外文件？

如果您需要更多信息，请询问。

【问题讨论】：

filewatcher 对单个文件的更改做出反应，此行编译更改的文件：Arguments: --no-color $FileName$。注意文件名变量。您需要在那里对根文件进行硬编码。你试过Arguments: --no-color /path/to/public_html/less/main.less吗？

确保Track only root files 选项已启用（在该文件观察器设置中）。它在 Windows 10 上运行良好。请参阅 ***.com/a/41483575/783119 或 ***.com/a/30481839/783119

@LazyOne 成功了！谢谢你。你想把它变成其他可能来这里的人的答案吗？

【参考方案1】：

请确保在特定的文件观察器设置中启用了Track only root files 选项——它就是这样做的。

来自https://www.jetbrains.com/help/phpstorm/2016.3/new-watcher-dialog.html#d199014e291

当对文件调用 File Watcher 时，PhpStorm 会检测包含该文件的所有文件。对于这些文件中的每一个，PhpStorm 会再次检测包含它的文件。递归重复此操作，直到 PhpStorm 到达指定范围内未包含的文件。这些文件称为根文件（不要与内容根混淆）。

选中此复选框时，文件观察器仅针对根文件运行。 清除该复选框后，文件观察程序针对调用它的文件以及在指定范围内递归包含此文件的所有文件运行。