Olá, Filipe, como vai?
Essa questão está relacionada à forma como os caminhos de arquivos são interpretados no SCSS, especificamente em relação ao uso de caminhos relativos.
Quando você utiliza @use './styles/abstract/mixins';, o caminho é considerado relativo ao arquivo SCSS que está fazendo a importação. O ./ indica o diretório atual, e o compilador vai tentar localizar o arquivo a partir dessa referência. No entanto, o erro está indicando que ele não conseguiu encontrar o arquivo nessa localização específica.
Já no código do professor, ele usa @use '../abstract/mixins';, onde o .. indica o diretório pai (ou seja, um nível acima do diretório atual). Esse caminho pode ser necessário dependendo de onde o arquivo que faz a importação está localizado em relação à pasta onde os mixins estão armazenados.
O motivo de o código do professor ter funcionado pode estar justamente nessa diferença de localização dos arquivos. Se o arquivo que faz a importação está em uma pasta diferente, como dentro de uma subpasta de components, o caminho ../abstract/mixins volta um nível na estrutura de diretórios, localizando o arquivo corretamente.
Exemplo para ilustrar:
- Se o arquivo que faz a importação está em components/_nosso-espaco.scss, o caminho ../abstract/mixins funciona porque ele sobe um nível para fora de components e encontra abstract/mixins dentro da pasta styles.
- Se você usar ./styles/abstract/mixins, ele procuraria dentro de components/styles/abstract/mixins, o que pode não existir, gerando o erro.
Espero ter ajudado!
Siga firme nos seus estudos e conte com o fórum sempre que precisar!
Abraços :)
Caso este post tenha lhe ajudado, por favor, marcar como solucionado
