在引入less时 ，嵌套的样式不生效，取消嵌套，样式就生效了？？

在引入less时 ，嵌套的样式不生效，取消嵌套，样式就生效了？？
.container{
display: flex;
.nav-left{
background: blue;
}
.main{
height: calc(100vh);
background: yellow;
}

}
这样不生效，下面的就有效？？为啥？
.container{
display: flex;

}

.nav-left{
background: blue;
}
.main{
height: calc(100vh);
background: yellow;
}

研究了半天。发现自己没配置less-loader编译。
要自己配置less-loader编译器。配置好后 要重启。