Как импортировать блок кода в sass с помощью @use и @forward?

#css #sass

Вопрос:

Я начинаю использовать sass, и у меня возникают проблемы с импортом блока кода, расположенного в нескольких файлах. Я не могу использовать «@import», вместо этого в документации указано использовать «@use» или «@forward»;но это не работает с моей сеткой.

_links.scss *(это работает)

 /* unvisited link */ a {  color: red;  text-decoration: none; }  /* visited link */ a:visited {  color: red; }  /* mouse over link */ a:hover {  color: red; }  /* selected link */ a:active {  color: red; }  

_grid.scss *(это не работает)

 .grid {  max-width: 1920px;  margin: 0 auto;  grid-template-columns: repeat(3, 1fr);  grid-template-rows: repeat(3, auto);  grid-template-areas:  "h h h"  "c c c"  "f f f";  header {  grid-area: h;  }  main {  grid-area: c;  }  footer {  grid-area: f;  } }  

main.scss *главная

 @use "./base/links"; // it works!. @use "./base/grid"; // it does not work @forward "./base/grid"; // it does not work  

почему это имеет значение для блока сетки?

Комментарии:

1. Находится ли база в той же папке, что и main.scss, или она находится за ее пределами?

Ответ №1:

Это должно сработать.

Проверьте, находится ли ваш верхний / основной / нижний колонтитул внутри элемента с сеткой имен классов.

@use в вашем случае должно работать так же, как и импорт.

Как структурирован ваш ДОМ?