1

Estou aprendendo desenvolvimento web e comecei mexer com SCSS em um layout porém o navegador não está puxando o mesmo. Ele está sendo chamado junto com o arquivo do CSS que está funcionando normalmente na página.

<link href="css/abert_painel.scss" rel="stylesheet">
<link href="../build/css/custom.css" rel="stylesheet">

Já a atuação do SCSS está sendo nula e recebo a seguinte mensagem de erro no inspector:

inserir a descrição da imagem aqui

Por que isso ocorre? Como posso resolver esse problema?

3
  • 1
    SCSS não deveria ser compilado para um arquivo .css e aí você referenciar este arquivo? (.css) Commented 15/06/2018 às 17:13
  • Podemos te orientar como instalar ferramentas para fazer a compilação do .scss para .css, qual seu Sistema Operacional? Tem Node? Ruby instalado? Ou pesquisa como compilar .scss
    – David
    Commented 15/06/2018 às 17:20
  • @David pode sim. Estou utilizando um mac
    – SHRIMP
    Commented 15/06/2018 às 17:23

1 Resposta 1

1

Para podermos compilar o arquivo .scss para .css precisa ter instalado o Ruby (essa é uma das formas).

1.Verifique se já tem instalado:

ruby -v

se retornar algo como:

ruby 2.0.0p247 (2013-06-27 revision 41674) [x86_64-darwin12.4.0]

Continue, senão veja aqui como instalar o ruby.

2.Instale o sass:

sudo gem install sass

3.Compilando

3.1 Modo Estático:
Dessa forma cada vez que tiver uma alteração no .scss tera que digitar a linha de comando abaixo para compilar.

sass --update cssfilename.scss

ou um diretório:

sass --update /directory/

3.2 Dinâmico:
Dessa forma qualquer alteração feita no .scss é automaticamente convertido para o .css.

sass --watch sass cssfilename.scss

ou um diretório:

sass --watch /directory/
2
  • coloquei sass --update abert_painel.scss e me retornou um erro: -bash: sass: command not found
    – SHRIMP
    Commented 15/06/2018 às 17:52
  • digita sass -v, teria que retornar a versão do SASS instalado.. senão tem que instalar
    – David
    Commented 15/06/2018 às 17:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .