Solucionado
Tive o mesmo erro que o dos outros tópicos, em que o VsCode não estava reconhecendo o Sass. Instalei a extensão indicada pelo professor e realmente passou a reconhecer o arquivo, mas mesmo assim não está funcionando. Não da o autocomplete e as referências não são passadas para a página. Nem consigo fazer o import das variáveis.
Ficou dessa forma aí... E simplesmente não funciona. Alguém poderia ajudar?
hoje, com a Alura e o Google Gemini
@import '../abstract/_variaveis.scss'
Como no outro post, o problema ta no import que não deixa o código continuar.
Segundo a documentação do Sass, o @import é necessário tanto para arquivos.scss quanto para arquivos.sass. https://sass-lang.com/documentation/at-rules/import
no footer.sass @import ../abstract/variaveis
no style.scss @import './components/footer';
Desse modo já funcionou no meu projeto.
Talvez o CSS do profº Guilherme tenha mais "superpoderes" do que o normal, funciona mesmo não colocando o @ no @import.
Aqui mesmo colocando o @import não está funcionando... Já havia tentado isso e visto que era a solução nos outros posts. Já tentei:
@import '../abstract/variables.scss', @import '../abstract/variables' import '../abstract/variables.scss', import '../abstract/variables'
Não parece que o problema ta no import.
Olá Lucas Leal de Paula Ricardo Albuquerque, se você quiser, eu gostaria de tentar achar o problema, disponibiliza o projeto inteiro ai pra gente!
Eu estou bem curioso pra entender o que pode ser, e se alguém achar seria ótimo. Possível que seja um erro bobo, mas a gente aprende.
https://github.com/lucasalbu12/Sass-Alura
Aí está o projeto como ta desenvolvido aqui ;)
Só precisei corrigir a indentação no _footer.sass , a partir da tag footer
estava assim
@import '../abstract/_variables.scss'
@mixin bg-colors($colors...)
background: linear-gradient(to left, $colors)
footer
text-align: center
font-size: $textSize / 2
border-top: $color-primary
margin-top: 1rem
padding: 1.2rem
@include bg-colors($color-primary, $color-secondary, $color-tertiary)
i
color: red
recuando um tab, ficou assim
@import '../abstract/_variables.scss'
@mixin bg-colors($colors...)
background: linear-gradient(to left, $colors)
footer
text-align: center
font-size: $textSize / 2
border-top: $color-primary
margin-top: 1rem
padding: 1.2rem
@include bg-colors($color-primary, $color-secondary, $color-tertiary)
i
color: red
Poxa, ta vendo? Não imaginava que fosse algo do tipo kkkkkk Muito obrigado, viu? Deu certinho aqui. Não tinha ideia de que isso poderia atrapalhar, acho que justamente por conhecer pouco.
Muito obrigado mesmo!