uni-app编译scss for循环时出现编译重复且造成卡顿

uni-app编译scss for循环时出现编译重复且造成卡顿

示例代码：

/** margin */
// margin
@for $i from 0 to 100 {  
    .m-#{$i}  
    {  
        margin: 1rpx * $i;  
    }  
}  

// margin -- auto  
@for $i from 0 to 100 {  
    .ma-#{$i}  
    {  
        margin: 1rpx * $i auto;  
    }  
}  

// margin -- auto -top  
@for $i from 0 to 100 {  
    .mat-#{$i}  
    {  
        margin: 1rpx * $i auto;  
        margin-bottom: 0;  
    }  
}  

// margin -- mtb  
@for $i from 0 to 100 {  
    .mtb-#{$i}  
    {  
        margin: 1rpx * $i 0;  
    }  
}  

// margin -- mlr  
@for $i from 0 to 100 {  
    .mlr-#{$i}  
    {  
        margin: 0 1rpx * $i;  
    }  
}  

// margin-top  
@for $i from 0 to 100 {  
    .mt-#{$i}  
    {  
        margin-top: 1rpx * $i;  
    }  
}  

// margin-left  
@for $i from 0 to 100 {  
    .ml-#{$i}  
    {  
        margin-left: 1rpx * $i;  
    }  
}  

// margin-right  
@for $i from 0 to 100 {  
    .mr-#{$i}  
    {  
        margin-right: 1rpx * $i;  
    }  
}  

// margin-bottom  
@for $i from 0 to 100 {  
    .mb-#{$i}  
    {  
        margin-bottom: 1rpx * $i;  
    }  
}  

/** padding */  
// padding  
@for $i from 0 to 100 {  
    .padding-#{$i}  
    {  
        padding: 1rpx * $i;  
    }  
}  

// padding -- ptb  
@for $i from 0 to 100 {  
    .ptb-#{$i}  
    {  
        padding: 1rpx * $i 0;  
    }  
}  

// padding -- plr  
@for $i from 0 to 100 {  
    .plr-#{$i}  
    {  
        padding: 0 1rpx * $i;  
    }  
}  

// padding-top  
@for $i from 0 to 100 {  
    .pt-#{$i}  
    {  
        padding-top: 1rpx * $i;  
    }  
}  

// padding-left  
@for $i from 0 to 100 {  
    .pl-#{$i}  
    {  
        padding-left: 1rpx * $i;  
    }  
}  

// padding-bottom  
@for $i from 0 to 100 {  
    .pb-#{$i}  
    {  
        padding-bottom: 1rpx * $i;  
    }  
}  

// padding-right  
@for $i from 0 to 100 {  
    .pb-#{$i}  
    {  
        padding-right: 1rpx * $i;  
    }  
}  

// border-radius  
@for $i from 0 to 100 {  
    .br-#{$i}  
    {  
        border-radius: 1rpx * $i;  
    }  
}

操作步骤：

每个页面只要用到了该class 类名都会有此效果。

预期结果：

当前页面的css里面不用引入scss全部编译的代码吧，不然真的卡顿。

实际结果：

页面中全部引入了编译的代码，每个页面非常的卡顿！

bug描述：

自定义scss 几个for循环（用于简洁的class类） 不仅在common/main.ttss编译 且在page下面的页面只要使用了循环里面的class 就会将所有的循环的class引入进当前的page.ttss。 如下图所示造成代码冗余 编译也很慢！ 之前我循环的是1000次 十来个循环差不多会有1w多个class 每个页面都要去生成这1w多个！ 非常卡。后面考虑到可能是这方面啊的问题 然后就改成了100次循环。 感觉重复的类名是不是在page.ttss 直接引入common下面的类啊？