How to import a code block on sass with @use and @forward?-CodePudding

I am starting to use sass and am having trouble importing a code block located in multiple files. I can't use "@import", instead the documentation says to use "@use" or "@forward";but it doesn't work with my grid.

_links.scss *(it works)

/* 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 *(this does not work)

.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 *main

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

why does it matter grid block?

CodePudding user response：

It should work.

Check if your header / main / footer are inside of an element with the class name grid.

@use should work the same as import in your case.

How is your DOM structured?