SCSS превключване от @import към @use: недефиниран миксин

От много години съм напълно доволен от @import, но времената се променят...

Затова се опитвам да преместя проектите си от @import към @use и @forward и открих тази публикация е доста полезна. Но когато се опитвам да внедря @use в моите части, продължавам да получавам „недефиниран миксин“. Мисля, че може да съм разбрал погрешно начина, по който работи @use, но не мога да разбера къде сбърках. Стигнах до точката, в която просто искам да се изкача на следващата църковна кула и да започна да стрелям по хора ... което също не ми помага да се концентрирам ;)

Така че съкратих всичко до много основни части от код, за да изследвам проблема при „лабораторни условия“. Ето какво измислих:

Папки и файлове:

styles.scss
├── a_tools
│   └── _mixins.scss
├── b_settings
│   └── _global.scss
└── c-components
    └── _test.scss

_mixins.scss:

@use '../b_settings/global' as *;

@function bp($bp) {
  @return ($breakpoints, $bp);
}

@mixin vp-medium {
  @media (min-width: #{breakpoints(small) + 1}) and (max-width: #{breakpoints(medium)}) {
    @content;
  }
}

_gobal.scss:

$breakpoints: (
  'small':                                  767px,
  'medium':                                 1024px,
  'navigation':                             840px,
);

:root {
  --vp-name:                                small;
}

@include vp-medium {
  :root {
    --vp-name:                              medium;
  }
}

_test.scss:

@use 'a_tools/mixins' as *;
@use 'b_settings/global' as *;

.test {
  margin: 10px;

  @include vp-medium {
    margin: 20px;
  }
}

styles.scss:

@use 'c_components/test';

Компилирането продължава да хвърля „недефиниран миксин на ред 15, колона 1 на _global.scss“, което е редът „@include vp-medium {“. Компилиран с Dart Sass 1.32.8.

Кой може да ми каже къде съм попаднал на грешен път? Благодаря предварително!


sass undefined scss-mixins
person Floyd    schedule 19.03.2021    source източник

Отговори (1)


arrow_upward
1
arrow_downward

Доколкото разбирам новите правила @use по начина, по който трябва да @useнеобходимите файлове с необходимия mixin към ВСЕКИ файл, който искате да използвате.

Ако съм разбрал правилно:

Вие @used файла mixins с mixin vp-medium в test.scss, където се използва.

Но не сте направили @use същия файл в global, където искате да използвате и mixin. Просто опитайте да @use файла също и до global.

ДОПЪЛНИТЕЛЕН:

Имахме подобна дискусия тук: https://stackoverflow.com/a/66300336/9268485

person Brebber    schedule 20.03.2021
comment
Приятелю, това изглежда беше проблемът! Благодаря много! Трябва да разбера, че вече не можете да изграждате вериги за внос. Лично аз изобщо не харесвам новия подход, той решава проблеми, които никога не съм имал и ме принуждава да пиша повече код. Но най-накрая поне го накарах да работи. Благодаря отново! :) - person Floyd; 21.03.2021