如何用JavaScript正确获取Less中定义的HTMLElement计算属性？

使用JavaScript的getComputedStyle方法获取元素属性（比如max-block-size）时，返回结果为none，但在浏览器开发者工具的计算属性面板中可以看到该属性的真实值。将Less编译为CSS文件后，脚本就能正常获取到属性值。

代码示例 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>getComputedStyle test</title>
        <link rel="stylesheet/less" type="text/css" href="styles.less" />
        <script>
            less = {
                env: 'development',
            };
        </script>
        <script src="less.min.js" type="text/javascript"></script>
        <script>
            less.watch();
        </script>
        <!-- <link rel="stylesheet" href="styles.css" /> -->
    </head>
    <body>
        <div id="element">some text</div>
    </body>
    <script defer>
        const someElement = document.getElementById('element');
        const styles = getComputedStyle(someElement);
        const maxBlockSize = styles.getPropertyValue('max-block-size');
        console.log(maxBlockSize);
    </script>
</html>

styles.less代码 #

#element {
    outline-style: solid;
    background-color: cadetblue;
    max-inline-size: 10rem;
    max-block-size: 5rem;
}

尝试过的解决方法 #

曾考虑脚本可能在Less编译完成前执行，尝试在脚本开头添加sleep函数延迟执行，但无效果。

环境说明 #

使用VSC + Live Preview

内容的提问来源于stack exchange，提问作者Korney Chervonenko