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

标签 less

我需要在特定类型的构建期间有条件地导入文件。使用<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7a0b5b2a9b3eaa4a8a9b3b5aea5eaadb4afaea9b387f7e9f0e9f7" rel="noreferrer noopener nofollow">[email protected]</a>它位于 <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e18d849292a1d0cfd5cfd3" rel="noreferrer noopener nofollow">[email protected]</a> 之上

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

尝试使用 protected 混合来确定我需要的构建类型,即跳过在开发模式下中断的某些 less 文件的导入。

@isProduction: 1;

...

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

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

...
.getImports();

但是,这似乎失败了,它尝试导入和解析 productionStyles.less每时每刻。我猜 protected mixins 不包括 @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并编写我自己的 less 解析器,但想首先探索内置选项。

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

最佳答案

我已经使用 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 下载的 less v1.4.1 .

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

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

关于less - 文件丢失时条件@import in .less 或无错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19357162/

相关文章:

node.js - 删除 Bootstrap 3 默认样式

twitter-bootstrap - Twitter 的 Bootstrap 3.x 语义移动网格

php - 将 LESS 用于 WordPress 主题选项

html - 将 Bootstrap 与特定元素结合使用时出现问题

css - 有什么方法可以在更少的 CSS 中加入数组?

css - 您可以通过将类嵌套在另一个类中来提高特异性吗?

html - 简化 LESS 混音和参数

css - 是否可以在 CSS calc() 中使用 vh 减去像素?

css - 如何使用 Less CSS 将元素部署到 Heroku?

html - CSS LESS - 嵌套兄弟选择器