Netbeans Less CSS（Node.js预处理程序）无法识别Mixin

Question

环境

• Netbeans IDE 8.0
• Windows 7的
• Node.js作为CSS预处理器的可执行文件
• 具有Bootstrap子主题的Drupal 7

资料夹结构

child_theme
  bootstrap
  css
  less
     mixins

导入的方式：

styles.less

 // Bootstrap library.
  @import 'bootstrap.less';
  @import 'mixins.less';

@import 'doc-that-calls-mixin-function.less';

mixins.less //负责导入文件夹mixins内的所有文件

// Mixins
// Utilities
@import "mixins/animation.less"; 

混入/ animation.less

.RoundBorders (@radius) {
    border-radius: @radius;
    -moz-border-radius: @radius;
     -webkit-border-radius: @radius;
}   

DOC-是通话，mixin的function.less

.rounded {
     .RoundBorders(4px);
}

使用上面的布局，每当我点击保存时，它都会吐出此错误：

NameError：.RoundBorders未定义

我已经确保将每个文件另存为“ UTF-8”，因为我在某个地方读到了问题。 我不知道为什么看不到mixin。

任何帮助，将不胜感激。

Answer 1

“为什么”发生此问题的原因来自@ seven-phases-max的评论。 引用他的话：

这是因为您将Netbeans设置为在保存时少编译每个文件。 因此，当您点击保存时，它将尝试仅编译doc-that-c​​alls-mixin-function.less，并且由于未导入mixins / animation.less，因此会出现错误

@ seven-phases-max建议以下内容：

您需要将其配置为[Netbeans]以仅重新编译styles.less

好吧，我寻找的网站可以帮助我配置Netbeans，使其仅在我更改任何其他Less文件时才重新编译主文件。 我什么也没发现，只有错误和人们想要的完全一样。 因此，有两种解决方案：

解决方案1（不是我申请的解决方案）

第一个解决方案是显而易见的（我不是要放弃Netbeans）； 只需在调用mixin的Less文件中添加@import file_of_mixin_you_need 。 就我而言：

DOC-是通话，mixin的function.less

@import 'mixins.less';

.rounded {
     .RoundBorders(4px);
}

如果这是一个文件很少的小项目，我会克服它，然后以这种方式进行。 对于大型项目还是中型项目，您应该采用这种方式吗？ 我的回答是“哎呀”。 为什么？ 好吧，到处都是@import boilerplate 。 您将如何跟踪？

解决方案2（我目前正在使用的一种）

仅当您的系统中安装了Node.js时，才能执行此解决方案。 为Windows安装很容易，只需转到Node.js站点，然后下载Windows安装程序即可。 一旦下载到控制台，您将可以访问“ npm”命令，使用它来安装lessc： npm install -g less 。 现在您准备好了。

好吧，在Netbeans中，我完全删除了“保存时编译”协议。 我打开命令窗口并导航到Netbeans项目的路径，一直到我的文件较少的位置。 我将命令窗口保持打开状态并随身携带。 完成保存并在Netbeans IDE中执行所需的操作后，请按照以下步骤操作：

1. 删除文件../css/style.css（否则编译较少时，它不会被覆盖）

2. 转到命令窗口（请记住，您必须位于less文件夹中）并执行以下命令：

   lessc style.less> ... \\ css \\ style.css

3. 完成

如果有任何错误，命令窗口将显示它们。 我选择此解决方案是因为它避免了我所有文件上的@import boilerplate 。 而且，我现在不再需要担心“ .gitignore”“编译” Netbeans正在编译的文件（对于我拥有的每一个更少的文件，它都会生成一个css文件）。

而已。 希望它对其他人有帮助。

Answer 2

要从@Joy添加到第二个解决方案，您还可以安装npm install watch -g并运行Windows命令行watch "lessc {your path}\\style.less > {your path}\\style.css" {your path}\\less

将文件保存在less目录中后，watch将立即执行lessc命令。 执行后，它将等待下一个更改。