Миграция в новые системы импорта SASS привел к дублирующим импорту ⇐ CSS

[Anonymous]

Я пытаюсь перейти в новые системы импорта Sass, @USE , @Forward и @include meta.load-css () , но после того, как наконец-то заработало все, что работает Я заметил, что мои правила «помощника» включены в каждый файл несколько раз. Это может быть связано с использованием meta.load-css () конкретно, но я не уверен, как сделать это иначе ...
Мой основной входной файл, modern.css , выглядит следующим образом:

Код: Выделить всё

@use "sass:meta";
@use "mycompany:helpers";

@forward "mycompany:helpers";
@forward "views/screen";

@include helpers.larger-than(xxxs) {
@include meta.load-css("views/screen_xxxs");
}

@include helpers.larger-than(xxs) {
@include meta.load-css("views/screen_xxs");
}

@include helpers.larger-than(xs) {
@include meta.load-css("views/screen_xs");
}

@include helpers.larger-than(s) {
@include meta.load-css("views/screen_s");
}

@include helpers.larger-than(m) {
@include meta.load-css("views/screen_m");
}

@include helpers.larger-than(l) {
@include meta.load-css("views/screen_l");
}

@include helpers.larger-than(xl) {
@include meta.load-css("views/screen_xl");
}

@include helpers.larger-than(xxl) {
@include meta.load-css("views/screen_xxl");
}

@include helpers.larger-than(xxxl) {
@include meta.load-css("views/screen_xxxl");
}

My Bail View, Views/_Screen.scss , настроен так:

Код: Выделить всё

/* ------------------------------------------------------------------------ *\
* Base
\* ------------------------------------------------------------------------ */

@forward "../base/normalize/normalize";
@forward "../base/selection/selection";
@forward "../base/align/align";
@forward "../base/grid/grid";
@forward "../base/core";
@forward "../base/components";

/* ------------------------------------------------------------------------ *\
* Component
\* ------------------------------------------------------------------------ */

@forward "../component/article/article";
@forward "../component/logo/logo";
@forward "../component/menu-list/menu-list";
@forward "../component/panel-toggle/panel-toggle";
@forward "../component/photoswipe/photoswipe";
@forward "../component/skip-links/skip-links";
@forward "../component/swiper/swiper";
@forward "../component/wp-caption/wp-caption";
@forward "../component/wp-gallery/wp-gallery";

/* ------------------------------------------------------------------------ *\
* Layout
\* ------------------------------------------------------------------------ */

@forward "../layout/page/page";
@forward "../layout/header/header";
@forward "../layout/navigation/navigation";
@forward "../layout/hero/hero";
@forward "../layout/content/content";
@forward "../layout/footer/footer";
< /code>
Каждое представление точки останова - что -то вроде этого (_screen_xs.scss

):

Код: Выделить всё

/* ------------------------------------------------------------------------ *\
* Component
\* ------------------------------------------------------------------------ */

@forward "../component/columns/columns_xs";
@forward "../component/swiper/swiper_xs";
< /code>
Каждый из этих файлов выглядит немного похоже на это (components/article/_article.scss

):

Код: Выделить всё

/* ------------------------------------------------------------------------ *\
* Article
\* ------------------------------------------------------------------------ */

@use "mycompany:helpers";

.article__figure {
& {
margin: helpers.remify(0 0 30, 16);
}
}
< /code>
mycompany:helpers

питается пользовательским импортером в моей задаче Gulp:

Код: Выделить всё

SASS({
includePaths: ["node_modules", "vendor", ...VENDOR_DIRS.map(dir =>  `vendor/mycompany/${dir}/node_modules`)],
importers: [{
findFileUrl(url) {
if (url.startsWith("node_modules/")) {
return new URL(`file://${plugins.path.resolve(url)}`);
}

if (url === "mycompany:helpers") {
return new URL(`file://${plugins.path.resolve("./src/assets/styles/helpers/_helpers.scss")}`);
}

return null;
}
}],
outputStyle: plugins.argv.dist ? "compressed" : "expanded",
})
< /code>
The _helpers.scss

Сам файл выглядит немного похоже на это:

Код: Выделить всё

/* ------------------------------------------------------------------------ *\
* Helpers
\* ------------------------------------------------------------------------ */

// imports

@use "sass:math";
@use "mixins" as *;
@use "functions" as *;
@use "variables" as *;

@forward "mixins";
@forward "functions";
@forward "variables";

// colors (custom properties)

:root {
@each $name, $data in $colors {
@each $variant, $hex in $data {
--__gulp_init_namespace__-color-#{$name}-#{$variant}: #{$hex}; // stylelint-disable-line
}
}
}

/* colors (classes) */

@each $name, $data in $colors {
.__color-#{$name} {
color: color($name) !important;
}
}

// generic helpers

.__big {
font-size: 1.25em !important;
}

.__small {
font-size: 0.75em !important;
}

.__bold {
font-weight: 700 !important;
}

...
< /code>
In my modern.css

, я вижу три экземпляра всего кода в _helpers.scss . В некоторых других моих файлах на уровне корня я вижу еще больше, в моем редакторе. my Editor.css для общего числа).
Что я могу сделать, чтобы это исправить?

Подробнее здесь: https://stackoverflow.com/questions/794 ... te-imports