Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

39
respostas

Sprite não compilado (me deem uma luz)

Meu sprite não compilou no sublime mas sigo fazendo o projeto.

https://github.com/amandagodoy/Sass-Compas-descompilando-CSS

Poderiam me ajudar a descobrir o que tenho feito de errado. Já é a terceira vez que faço esse projeto e imagino que não seja uma boa prática, ficar refazendo todo o projeto desde o inicio principalmente pelo tempo mais o trabalho de achar o problema no final.

39 respostas

Fala ai Amanda, tudo bem? Acabei de responder uma dúvida que pode te ajudar: https://cursos.alura.com.br/forum/topico-consegui-mas-nao-como-queria-137936

Espero ter ajudado.

Matheus, bem e vc como está?

Bom fiz os procedimentos que me guiou bastante e um uninstall do compass, mas mesmo assim continua tendo o mesmo erro, segue abaixo o erro:

Error: No files were found in the load path matching "plataformas/*.png". Your current load paths are: C:/Users/mandi/OneDrive/Documentos/Meus Projetos/Front-end/Sass-Compas-descompilando-CSS/site-apeperia/imagens on line 2 of C:/Users/mandi/OneDrive/Documentos/Meus Projetos/Front-end/Sass-Compas-descompilando-CSS/site-apeperia/css/estilos.scss

1: //$sprite-space: 5px; 2: @import "plataformas/*.png"; 3: 4: @import 'helpers/variaveis'; 5: @import 'helpers/mixins'; 6: 7: @import 'base/normalize';

Backtrace: C:/Users/mandi/OneDrive/Documentos/Meus Projetos/Front-end/Sass-Compas-descompilando-CSS/site-apeperia/css/estilos.scss:2 C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/sass-3.4.25/lib/sass/tree/import_node.rb:67:in rescue in import' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/sass-3.4.25/lib/sass/tree/import_node.rb:44:inimport' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/sass-3.4.25/lib/sass/tree/import_node.rb:28:in imported_file' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/sass-3.4.25/lib/sass/tree/import_node.rb:37:incss_import?' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:314:in visit_import' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/sass-3.4.25/lib/sass/tree/visitors/base.rb:36:invisit' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:162:in block in visit' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/sass-3.4.25/lib/sass/stack.rb:79:inblock in with_base' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/sass-3.4.25/lib/sass/stack.rb:115:in with_frame' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/sass-3.4.25/lib/sass/stack.rb:79:inwith_base' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:162:in visit' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/sass-3.4.25/lib/sass/tree/visitors/base.rb:52:inblock in visit_children' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/sass-3.4.25/lib/sass/tree/visitors/base.rb:52:in map' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/sass-3.4.25/lib/sass/tree/visitors/base.rb:52:invisit_children' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:171:in block in visit_children' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:183:inwith_environment' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:170:in visit_children' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/sass-3.4.25/lib/sass/tree/visitors/base.rb:36:inblock in visit' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:190:in visit_root' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/sass-3.4.25/lib/sass/tree/visitors/base.rb:36:invisit' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:161:in visit' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:10:invisit' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/sass-3.4.25/lib/sass/tree/root_node.rb:36:in css_tree' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/sass-3.4.25/lib/sass/tree/root_node.rb:20:inrender' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/sass-3.4.25/lib/sass/engine.rb:284:in render' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/compass-import-once-1.0.5/lib/compass/import-once/engine.rb:17:inblock in render' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/compass-import-once-1.0.5/lib/compass/import-once/engine.rb:29:in with_import_scope' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/compass-import-once-1.0.5/lib/compass/import-once/engine.rb:16:inrender' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/sass-3.4.25/lib/sass/plugin/compiler.rb:494:in update_stylesheet' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/sass-3.4.25/lib/sass/plugin/compiler.rb:215:inblock in update_stylesheets' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/sass-3.4.25/lib/sass/plugin/compiler.rb:209:in each' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/sass-3.4.25/lib/sass/plugin/compiler.rb:209:inupdate_stylesheets' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/sass-3.4.25/lib/sass/plugin/compiler.rb:294:in watch' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/compass-1.0.3/lib/compass/sass_compiler.rb:46:inwatch!' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/compass-1.0.3/lib/compass/commands/watch_project.rb:41:in perform' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/compass-1.0.3/lib/compass/commands/base.rb:18:inexecute' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/compass-1.0.3/lib/compass/commands/project_base.rb:19:in execute' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/compass-1.0.3/lib/compass/exec/sub_command_ui.rb:43:inperform!' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/compass-1.0.3/lib/compass/exec/sub_command_ui.rb:15:in run!' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/compass-1.0.3/bin/compass:30:inblock in <top (required)>' C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/compass-1.0.3/bin/compass:44:in `<top

isso está no terminal:

error css/estilos.scss (Line 2: No files were found in the load path matching "plataformas/*.png". Your current load paths are: C:/Users/.../OneDrive/Documentos/Meus Projetos/Front-end/Sass-Compas-descompilando-CSS/site-apeperia/imagens)

Fala Amanda, por algum motivo o SASS e Compass não estão achando a pasta plataformas com os arquivos .png dentro.

Verifique o caminho do arquivo .scss e estrutura de pasta das imagens, garante que existe essa pasta plataformas com as imagens dentro.

Espero ter ajudado.

Bom conforme a solução que tu me passou eu tentei aplicar, mas não entendi o diretório aonde ficaria a pasta plataforma seria criada para ser importado.

Fala Amanda, você acabou criando a pasta plataforma dentro de imagens em singular, quando deveria ser no plural.

Após arrumar o nome da pasta o CSS vai dar outros erros de mixin, faça:

  1. Vai no seu plano.scss e troca o sprite de @include all-sprite-sprites; para @include all-plataformas-sprites; isso porque o nome do meio é referente ao nome da pasta onde encontra-se os sprites.

Espero ter ajudado.

Matheus, ainda continua tendo o mesmo problema e já commitei as atualizações.

Fala Amanda, eu fiz o teste com seu projeto, apaguei os arquivos .css e rodei um compass compile, deu tudo certo.

O arquivo estilos.css foi criado com sucesso sem erro algum.

Abraços.

Matheus, agradeço por me ajudar com todos esses erros.

Mas detalhando sua explicação para o projeto do sass e compass dar certo, você excluiu quais arquivos .css para ele compilar em compass?

Fala Amanda, exclui todos kkkk

Ai ele compilou o estilos.css corretamente, os outros ele vai tentar compilar também por ser o padrão do SASS, mas, o importante para você é o estilos.css.

Para ele não compilar tudo, os arquivos devem começar com _, exemplo:

planos.scss =>_planos.scss

Assim o SASS não compila arquivos que começam com _, o resto no código não muda nada (imports e afins).

Espero ter ajudado.

Pois nos meus arquivos todos são .scss tem .css, certo? Então eu excluo todos para rodar o compilador do compass isso?

Eu só estou confirmando, pq está mais difícil do que imaginava finalizar esse modulo kkkk

Fiz a compilação e veio isso no console:

C:\Users\mandi\OneDrive\Documentos\Meus Projetos\Front-end\Sass-Compas-descompilando-CSS\site-apeperia>compass compile write css/base/normalize.css create imagens/plataformas-se0d250c14a.png error css/estilos.scss (C:/Ruby27-x64/lib/ruby/2.7.0/tempfile.rb:129:in initialize': No such file or directory @ rb_sysopen - C:/Users/mandi/OneDrive/Documentos/Meus Projetos/Front-end/Sass-Compas-descompilando-CSS/site-apeperia/.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/C%058/Ruby27-x64/lib/ruby/gems/2.7.0/gems/compass-core-1.0.3/stylesheets/compass/_support.scssc20210107-1304-sae9wn) error css/helpers/mixins.scss (C:/Ruby27-x64/lib/ruby/2.7.0/tempfile.rb:129:ininitialize': No such file or directory @ rb_sysopen - C:/Users/mandi/OneDrive/Documentos/Meus Projetos/Front-end/Sass-Compas-descompilando-CSS/site-apeperia/.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/C%058/Ruby27-x64/lib/ruby/gems/2.7.0/gems/compass-core-1.0.3/stylesheets/compass/_support.scssc20210107-1304-yzt8o2) write css/helpers/variaveis.css error css/layout/blog.scss (Line 26: Undefined variable: "$mq-mobile".) error css/layout/contato.scss (Line 11: Undefined variable: "$mq-mobile".) error css/layout/destaque.scss (Line 10: Undefined variable: "$mq-mobile".) error css/layout/footer.scss (Line 21: Undefined variable: "$cor-auxiliar".) error css/layout/geral.scss (Line 10: Undefined variable: "$mq-mobile".) error css/layout/header.scss (Line 3: Undefined variable: "$cor-padrao".) error css/layout/planos.scss (Line 3: Undefined variable: "$cor-auxiliar".) error css/layout/sobre.scss (Line 30: Undefined mixin 'all-plataformas-sprites'.) Compilation failed in 10 files.

Fala Amanda, parece que ainda não está encontrando alguns arquivos, depois das alterações o projeto no Github foi atualizado? Vou precisar rodá-lo novamente e analisar com mais calma.

Espero ter ajudado.

Olá Mahtues, obrigada pela sua insistência em me ajudar em sass. Sim, já atualizei no github

Fala Amanda, testei aqui novamente, tenta o seguinte:

  1. Apague a pasta .sass-cache e os arquivos estilos.css e estilos.map.css.
  2. Tente compilar o arquivo novamente: compass compile css/estilos.scss (na raiz do site-apeperia.

Espero ter ajudado.

Também tive vários problemas com o sass/compass , uso o visual studio code (windows 10)

e parece que o problema está nos programas, estou seguindo meu curso sem fazer esse procedimentos...

Anderson, eu tentei seguir as aulas contento os erros no sublime e vscode, mas ainda estou travada nesse erro independente de seguir as aulas do curso

Sim, infelizmente não consegui corrigir esse erro, terminei o curso! Acho que o problema está na versão do programa Sass/Compass .

Finalizei o curso sem usar o recurso e fazendo apenas as anotações, e futuramente tentarei usar em algum outro programa!

Espero que você consiga resolver e finalizar o curso também Amanda!

Anderson, obrigada e sucesso para ti

Matheus, então nos meus arquivos tem duas pastas do mesmo nome, qual seria o caminho?

site-apeperia/.sass-cache

site-apeperia/css/.sass-cache

Fala Amanda, pode apagar as duas.

Abraços.

apresentou tal erro:

C:\Users\mandi\OneDrive\Documentos\Meus Projetos\Front-end\Sass-Compas-descompilando-CSS\site-apeperia>sass compile css/estilos.scss Error reading compile: no such file or directory.

C:\Users\mandi\OneDrive\Documentos\Meus Projetos\Front-end\Sass-Compas-descompilando-CSS\site-apeperia>sass css/estilos.scss Error: Can't find stylesheet to import. ╷ 2 │ @import 'plataformas/*.png'; │ ^^^^^^^^^^^^^^^^^^^ ╵ css\estilos.scss 2:9 root stylesheet

o erro anterior foi no terminal pelo sublime, já o erro abaixo foi da vscode:

PS C:\Users\mandi\OneDrive\Documentos\Meus Projetos\Front-end\Sass-Compas-descompilando-CSS\site-apeperia> sass compile css/estilos.scss sass : O arquivo C:\Users\mandi\AppData\Roaming\npm\sass.ps1 não pode ser carregado porque a execução de scripts foi desabilitada neste sistema. Para obter mais informações, consulte about_Execution_Policies em https://go.microsoft.com/fwlink/?LinkID=135170. No linha:1 caractere:1

  • sass compile css/estilos.scss
  • ~
    • CategoryInfo : ErrodeSegurança: (:) [], PSSecurityException
    • FullyQualifiedErrorId : UnauthorizedAccess

Fala Amanda, tenta executar o comando pelo CMD por favor e me mande o log completo.

Fico no aguardo.

Matheus, boa noite!

Segue abaixo:

C:\Users\mandi\OneDrive\Documentos\Meus Projetos\Front-end\Sass-Compas-descompilando-CSS\site-apeperia>sass compile css/estilos.scss Error reading compile: no such file or directory.

Fala ai Amanda, acho que você usou o sass em vez do compass (eu tinha mandado o comando errado).

Tente: sass compile css/estilos.scs.

Fico no aguardo.

Matheus,

Está me deixando confusa é sass ou compass?

C:\Users\mandi\OneDrive\Documentos\Meus Projetos\Front-end\Sass-Compas-descompilando-CSS\site-apeperia>sass compile css/estilos.scss Error reading compile: no such file or directory.

C:\Users\mandi\OneDrive\Documentos\Meus Projetos\Front-end\Sass-Compas-descompilando-CSS\site-apeperia>compass compile css/estilos.scss 'compass' não é reconhecido como um comando interno ou externo, um programa operável ou um arquivo em lotes.

Fala Amanda, estranho, o compass não está sendo reconhecido via CMD.

Se você tentar rodar algum comando do SASS, ele é reconhecido? Tente pegar a versão do SASS por exemplo: sass -v

Talvez vai ser necessário adicionar os binários do Ruby no PATH da máquina (depende de como foi feita a instalação do SASS).

Espero ter ajudado.

Oi Matheus eu fiz a instalação via terminal do vscode

Fala Amanda, você instalou via npm?

Abraços

Eu instalei conforme instruções da alura: Instalando Com o Ruby instalado, dê o comando abaixo e aguarde o término da instalação.

gem install sass

Fala Amanda, reparei que tu instalei o SASS via Ruby com gem.

Eu recomendo você instalar via npm:

npm i -g sass

Via NPM normalmente os binários do SASS são adicionados no PATH da máquina e podem ser chamados globalmente.

Espero ter ajudado.

Olá Matheus, Então fiz a instalação e agora?

Fala Amanda, agora tenta rodar o SASS via CMD e posteriormente o Compass.

Abraços.

Olá Matheus,

Quais os comandos devo usar para ambos

Fala Amanda, no caso seria rodar o sass para ver se está funcionando via CMD agora (após instalar via npm) e o compass da forma como é feita em aula.

Espero ter ajudado.

Usar esses comando abaixo: sass compile css/estilos.scss & compass compass compile css/estilos.scss