我需要在特定类型的构建期间有条件地导入文件。使用<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 ...
.
我开始认为它需要更大的重构,其中 devStyles
和productionStyles
都是一件事,我只是在它们之间切换 - 只是 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/