Question

我有以下SCSS文件结构： suppliers.scss：包括_base.scss，_sortable-table.scss和_product.scss _sortable-table.scss和_product.scss：包含_base.scss

_base.scss包含许多定义布局的变量，如调制和列间大小。此外，它包含由其他人扩展的基本布局类。

问题是，由于partials和每个样式都需要这个基本导入，因此它的内容会在结果css文件中多次重复。这会给css带来很大的开销。

所以问题是如何防止这种重复。有什么猜测？

查看https://github.com/coletivoEITA/noosfero-ecosol/tree/distribution-plugin/plugins/suppliers/public/stylesheets

的实际来源

Answer 1

您应该仔细查看import-directives，extends和mixins，然后重构代码。您可能想要以“superfile”（app.scss）开头。这个文件基本上只是按照您需要的顺序导入所有创建的文件。

这可能是app.scss的典型内容：

@import "settings";

@import "mixins";
@import "extends";
@import "browser-reset";

@import "styles";
@import "more-styles"
@import "even-more-styles"
@import "..."

我要做的第一件事就是导入我的所有设置/变量。
之后我导入的mixins可能已经依赖于某些变量了。
现在我正在导入我的扩展，现在可以使用变量＆amp;混入。
浏览器重置文件
我的App-Styles可以使用到目前为止我所做的所有设置，混合和扩展。

确保app.scss之外的所有其他文件都带有下划线（例如_settings.scss），否则它们将被创建为单独的css文件，当然在使用变量，mixins或extends时会抛出错误在他们中间。

如果你像这样组织代码并开始使用mixins并在有意义的时候扩展，那么你就不必再担心膨胀的代码了。

导入基本部分scss时避免复制

1 个答案: