node.js - 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"; 

mixins/animation.less

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

doc-that-c​​alls-mixin-function.less

.rounded {
     .RoundBorders(4px);
}

使用上面的布局，每当我点击保存时，它就会吐出这个错误:

NameError: .RoundBorders 未定义

我已确保将每个文件保存为“UTF-8”，因为我在某处读到可能是问题所在。我不知道为什么它没有看到 mixin。

如有任何帮助，我们将不胜感激。

Answer 1

这个问题发生的“原因”来自@seven-phases-max 的赞成评论。引用他的话:

This is because you set Netbeans to compile each less file on save. So when you hit save it tries to compile just doc-that-calls-mixin-function.less and the error is expected since no mixins/animation.less is imported there

@seven-phases-max 建议如下:

You need to configure it [Netbeans] to recompile only styles.less

好吧，我正在寻找可以帮助我将 Netbeans 配置为仅在我更改任何其他 Less 文件时重新编译主文件的站点。我什么也没发现，只有错误和想要完全相同的人。所以有两种解决方案:

解决方案 1(不是我应用的那个)

第一个解决方案很明显(不，我不是说放弃 Netbeans)；只需在调用 mixin 的 Less 文件中添加 @import file_of_mixin_you_need。就我而言:

doc-that-c​​alls-mixin-function.less

@import 'mixins.less';

.rounded {
     .RoundBorders(4px);
}

如果它是一个只有很少文件的小项目，我会克服它并这样做。对于大型项目或中型项目，您应该这样做吗？我的回答是“见鬼不”。为什么？好吧，到处都是@import boilerplate。你打算如何跟踪它？

方案二(我目前使用的方案)

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

好吧，在 Netbeans 中，我完全删除了“保存时编译”协议(protocol)。我打开我的命令窗口并导航到我的 Netbeans 项目的路径，一直到我的 less 文件所在的位置。我让那个命令窗口保持打开状态并随身携带。当我在 Netbeans IDE 中完成保存并执行我需要的任何操作后，以下是要遵循的步骤:

1. 删除文件 ../css/style.css(否则它不会在 less 编译时被覆盖)

2. 转到您的命令窗口(记住您必须在您的 less 文件夹中)并执行此命令:

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

3. 完成

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

就是这样。希望它能帮助其他人。