Question

我需要在特定类型的构建期间有条件地导入文件。使用位于grunt-contrib-jshint@0.7.0

之上的less@1.4.2

到目前为止我尝试了什么......

尝试使用受保护的mixins来确定我需要的构建类型，即跳过在dev模式下中断的某些较少文件的导入。

@isProduction: 1;

...

.getImports() when (@isProduction = 1){
}

.getImports() {
    @import "productionStyles";
}

...
.getImports();

然而，这似乎失败了，它试图一直导入和解析productionStyles.less。我想受保护的mixins不会涵盖@import，那么您将如何解决这个问题呢？

我也试过

@productionStyles: "productionStyles"; // or 0

...
@productionStyles: 0;


.getImports() when not (@productionStyles = 0){
    @import "@{productionStyles}";
}

...

同样可用，它会尝试导入它>> FileError: '0.less' wasn't found in ...。

我开始认为它需要一个更大的重构，其中devStyles和productionStyles都是一个东西而我只是在它们之间切换 - 它只是bioStyles是一个可以添加的只有在完全构建后由于deps编译，我宁愿通过有条件的编译来解决这个问题。

我也可以放弃使用grunt-contrib-jshint并编写我自己较少的解析器，但首先要探索内置选项。

由于productionStyle.less引用了不在文件系统中的多个文件，是否可以忽略失败并继续构建的@imports？我不希望因其他地方可能的解析器错误而禁用所有错误的错误检查/中断...

Answer 1

我已使用switch parameter解决了您的问题：

的index.html

  <!DOCTYPE html>
  <html>
    <head>
      <title></title>
      <link rel="stylesheet/less" type="text/css"  href="style.less" />
      <script src="less.js" type="text/javascript"></script>
    </head>
    <body>
      [foo]
    </body>
  </html>

style.less

.mixin(production) {
  @import "test.less";
  background: @color;
}

.mixin(dev) {
  background: green;
}

html {
  .mixin(production);
}

test.less

@color: red;

less.js 直接从project page下载的v1.4.1较少。

代码应该导致红色背景。切换到html { .mixin(dev); }禁用@import，背景变为绿色。

您的解决方案也可能有效，但您在HTML或类似内容中有错误 - 我没有检查过。

条件@import in。无文件或文件丢失时没有错误

1 个答案: