Question

我想在webpack上遇到问题。

我有一个Laravel 5.6安装，该安装通过带有Webpack的Laravel Mix将scss编译为css。（我还安装了TailwindCSS，但这应该可以正常工作。）

我有以下SCSS：

@for $i from 1 through 10 {
    p.animated-opacity, a.animated-opacity {
        &:nth-child(#{$i}) {
            animation-delay: #{$i} * 2s;
        }
    }

    input.animated-opacity, button.animated-opacity, select.animated-opacity {
        &:nth-child(#{$i}) {
            animation-delay: (2s * #{$i - 1}) + 1s;
        }
    }
}

使用Laravel Mix和webpack将其编译为：

main p.animated-opacity:nth-child(1),
main a.animated-opacity:nth-child(1) {
    -webkit-animation-delay: 1 * 2s;
    animation-delay: 1 * 2s;
}

main input.animated-opacity:nth-child(1),
main button.animated-opacity:nth-child(1),
main select.animated-opacity:nth-child(1) {
    -webkit-animation-delay: 2s * 0 + 1s;
    animation-delay: 2s * 0 + 1s;
}

main p.animated-opacity:nth-child(2),
main a.animated-opacity:nth-child(2) {
    -webkit-animation-delay: 2 * 2s;
    animation-delay: 2 * 2s;
}

然后继续，直到到达第十个孩子。但是，它应编译为：

main p.animated-opacity:nth-child(1),
main a.animated-opacity:nth-child(1) {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

main input.animated-opacity:nth-child(1),
main button.animated-opacity:nth-child(1),
main select.animated-opacity:nth-child(1) {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

main p.animated-opacity:nth-child(2),
main a.animated-opacity:nth-child(2) {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}

我是什么意思，或者Laravel Mix / Webpack做错了吗？

预先感谢

Answer 1

通过将秒数包装在calc（）中发现它可以工作，并且浏览器可以正确渲染它。 SCSS现在是：

@for $i from 1 through 10 {
    p.animated-opacity, a.animated-opacity {
        &:nth-child(#{$i}) {
            animation-delay: calc(#{$i} * 2s);
        }
    }

    input.animated-opacity, button.animated-opacity, select.animated-opacity, label.animated-opacity {
        &:nth-child(#{$i}) {
            animation-delay: calc((2s * #{$i - 1}) + 1s);
        }
    }
}

Laravel Mix Webpack在循环内部乘法中出现scss编译错误

1 个答案: