使用全局变量导入较少的文件具有奇怪的行为

时间:2017-10-23 10:30:27

标签: webpack less

我减少了4个文件:

test.less

@import "./test-a.less";
@import "./test-b.less";
@import "./test-c.less";
body {
  color: @globalVar;
}

测试a.less

@globalVar: red;
.a {
    color: @globalVar;
}

测试b.less

@globalVar: green;
.b {
    color: @globalVar;
}

测试c.less

.c {
    @import "./test-a.less";
    color: @globalVar;
}

我使用webpack,less-loaderextract-text-webpack-plugin将那些较少的编译成单个css文件。我希望.c的输出应该是这样的,因为我正在导入test-a.less但是输出对我来说完全没有意义。任何人都可以为我解释或给我一个实现我想要的方法吗?

包含此块的预期输出

.c{ color: red; }

实际输出

.a {
  color: green;
}
.b {
  color: green;
}
.c {
  color: green;
}
body {
  color: green;
}

1 个答案:

答案 0 :(得分:0)

感谢@ seven-phases-max

  

默认情况下会忽略同一文件的后续导入 - 请参阅lesscss.org/features/#import-options

我设法通过多重选项

来解决我的问题
.c {
    @import (multiple) "./test-a.less";
    color: @globalVar;
}