LESS 导入和继承不适用于 Svelte

编程问答 2022-11-21

问题描述

我们如何在 svelte 中使用 LESS 继承而不收到未使用的 CSS 选择器警告？

在我们的 svelte 项目中，我们有一个通用的 base.less 文件，其中包含我们在实际 svelte 组件和页面中继承的通用选择器。

例如，base.less 包含这个选择器：

.clearfix { 
    *zoom: 1;
    &:before,&:after { 
        content: ""; 
        display: table;
    }

    &:after {
        clear: both;
    }
}

在 svelte 组件中，我们可以将该类添加到特定类的内容中，这样我们就不需要在 DOM 元素的类列表中重复它：

@import url("../less/base.less");

.item-wrapper {
    padding: @pad2 @pad1;
    .clearfix;
}

我们现在遇到的问题是，在我们导入 base.less 的每个组件中，对于 base.less 中的每个选择器，我们都会收到一个警告，我们没有在 HTML 中使用：未使用的 CSS 选择器“.clearfix”

不能使用标记 :global(.clearfix)，因为这样 LESS 无法识别选择器，代码也不再编译：.clearfix is undefined

简而言之，摆脱一长串未使用的 CSS 选择器警告的唯一方法是实际禁用该警告。我之前已经问过 that question。但是，该问题的解决方案不再有效，因此似乎不可持续。此外，发出警告是有原因的。

感觉我们陷入了 svelte Preprocess 的差距，但我希望我们遗漏了一些东西。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

lesssvelte