文件丢失时,条件@import .less 或无错误



我需要在特定类型的构建过程中有条件地导入文件。使用less@1.4.2之上的grunt-contrib-jshint@0.7.0

到目前为止我尝试过...

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

@isProduction: 1;
...
.getImports() when (@isProduction = 1){
}
.getImports() {
    @import "productionStyles";
}
...
.getImports();

但是,这似乎失败了,它一直尝试导入和解析productionStyles.less。我想受保护的混合蛋白不包括@import,那么你将如何解决这个问题?

我也试过

@productionStyles: "productionStyles"; // or 0
...
@productionStyles: 0;

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

同样,无论如何,它都会尝试导入它 >> FileError: '0.less' wasn't found in ... .

我开始认为它需要一个更大的重构,其中devStylesproductionStyles都是一回事,我只是在它们之间切换 - 只是 productionStyles 是一个添加,由于 deps 的原因,只能在完整构建后编译,我宁愿通过有条件地编译来解决这个问题。

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

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

我已经使用开关参数解决了您的问题:

索引.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>

风格.无

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

测试.无

@color: red;

更少.js 更少 v1.4.1 直接从项目页面下载。

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

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

最新更新