7
respostas

style.scss / style.css

No meio do curso tive que trocar de computador, e agora abri novamente a pasta pelo computador novo, como feito no inicio, fiz o download do node, e também do sass, porem, quando utilizo o watch no terminal, para que seja espelhado no arquivo style.css o que coloco no style.scss, o terminal me devolve..

Error reading style.scss: no such file or directory.

Sass is watching for changes. Press Ctrl-C to stop.

Sendo assim, o arquivo collection.scss não entra na minha página, a estilização não está sendo executada, como posso resolver isso? Qual o problema que está acontecendo, sendo que diferente do que o terminal diz eu tenho um arquivo style.scss

7 respostas

Esse erro sinaliza que o sass não está achando o arquivo que é para ele ficar vendo, confira se ele está dentro de alguma pasta e passe essa caminho para o sass.

Correto, após direcionar, como na aula, para a pasta própria, utilizei o comando sass --watch scss/style.scss:css/style.css no terminal para que as alterações sejam executadas, porem, a resposta que tive foi a seguinte

Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($size, 16px)

More info and automated migrator: https://sass-lang.com/d/slash-div

╷ 35 │ @return $size / 16px * 1rem; │ ^^^^^^^^^^^^ ╵ scss/style.scss 35:13 calculateRem() scss/style.scss 39:16 fontSize() scss/_footer.scss 18:9 @import scss/style.scss 42:19 root stylesheet

Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($layout-margin-size, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

╷ 51 │ %half-margin-#{direction} {margin-#{direction}: $layout-margin-size / 2;} │ ^^^^^^^^^^^^^^^^^^^^^^^ ╵ scss/style.scss 51:53 root stylesheet

Error: The target selector was not found. Use "@extend %half-margin-top !optional" to avoid this error. ╷ 19 │ @extend %half-margin-top, %default-margin-bottom; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ scss/_about.scss 19:9 root stylesheet

Sass is watching for changes. Press Ctrl-C to stop.

Está sinalizando um problema na forma de escrita do código se estou entendendo bem. O que está acontecendo? Algum jeito de resolver? O código está inteiramente da mesma forma e ontem estava funcionando, apenas troquei o computador e tive que reinstalar o node e o sass novamente, e quando tentando utilizar o compile entre o scss e o css, não está funcionando.

Como atualizei, e esses foram os problemas que me foi retornado, meu style.css está zerado, sem nada nele pois não consegue ser feita a leitura do style/scss. Como posso fazer funcionar o compile entre esses dois arquivos. Não consigo seguir o curso se não consigo arrumar isso.

Fala Victo,

Tive um problema parecido e pelo que entendi está relacionado com a ( / "barra") de divisão. Aparentemente, como mostra na mensagem que você informou "Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0." ela foi descontinuada e será removida do Dart Sass 2.0.0.

Como você informou que mudou de computador, pode ter ocorrido de mudar a versão do Sass.

Enfim, para resolver o meu problema, precisei inserir na primeiraslinha do documento a função ( @use "sass:math"; ) para realizar divisão.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

E onde existe a divisão precisei alterar para math.div( parametro1, parametro2 )

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Espero que tenha te ajudado.

E ai Alisson, beleza?

Cara, fiz a tentativa da alteração que voce comentou, o resultado foi o seguinte..

Após utilizado o comando do terminal sass --watch scss/style.scss:css/style.css como foi feito pela professora, já aplicando os arquivos nas pastas, o terminal me retornou dizendo o seguinte:

Error: The target selector was not found. Use "@extend %double-margin-bottom !optional" to avoid this error. ╷ 46 │ @extend %double-margin-bottom; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ scss/_about.scss 46:9 root stylesheet

Tem alguma idéia do que pode ser o problema? Queria entender o que ta acontecendo, já tentei ler a documentação pra ver se diz algo e não consegui encontrar uma resolução.

O erro da divisão foi resolvido, porem o que não entendo é porque nesse trecho do código, apenas no arquivo about.scss o terminal vê um problema no comando @extend %double-margin-bottom; enquanto em outros arquivos o mesmo comando vem sendo utilizado e não parece estar dando erro.

Fala Victor, que bom que resolvel o erro referente a divisão.

Tem como colocar o teu projeto no git e mandar o link para dar uma olhada?

Oi Victor, eu tive o mesmo problema quando usava o comando sass --watch scss/style.scss:css/style.css eu inverti as barras sass --watch scss\style.scss:css\style.css e deu certo comigo. Basta tentar.... Boa sorte.

Para aqueles que estão com dificuldades em utilizar o Sass via Nodejs caso estejam utilizando o vscode tentem utilizar o Live Sass Compiler, é uma extensão que torna mais fácil a utilização do Sass no projeto.