Como usar o SASS com o NetBeans 8.0.1

Estou tentando usar o SASS no NetBeans 8.0.1. Eu tenho Ruby e SASS configurados corretamente com base no feedback de ruby ​​-v.

Eu tenho um aplicativo da web configurado com pastas css e scss em Project \ Web Pages \ resources.

Minha input e saída estão definidas para / scss e / css, respectivamente, e eu verifiquei ‘Compile Sass File on Save’. Eu criei um arquivo styles.scss e adicionei alguns SASS / CSS.

Quando eu salvar o arquivo styles.scss, ele deve gerar um styles.css? Nada acontece quando eu salvo ou compilo o projeto.

Alguém se deparou com algum problema semelhante ou tem sugestões sobre como depurar esse problema?

Desde já, obrigado!

Sim, quando você salva o arquivo, o css deve ser criado / atualizado. Eu acho que você tem mapeamento errado para os diretórios de input / saída. Os caminhos precisam ser relativos à raiz do site / raiz da web. Eu não sei ao certo qual é o seu projeto (HTML5 ou PHP ou Java Web ou outro?), Mas se você tem o projeto Java Web, então os caminhos precisam ser

resources/scss -> resources/css 

Instalando o SASS no Windows10, Ruby2.2.3, Netbeans8

  1. Faça o download do SASS para Windows – RubyInstaller.org
  2. Instale o Ruby como:

Instalando o SASS no Netbeans

  1. Pesquise as janelas do CMD ( Prompt de Comando ) e inicie-o.
  2. Acesse a pasta bin do Ruby usando cd \Ruby\bin (Hit Enter)
  3. Instale sass usando o comando gem install sass (pressione Enter para instalar)

Instalando o SASS no Netbeans

  1. Aguarde a instalação terminar

Instalando o SASS no Netbeans

  1. No Netbeans aberto
    Opções → Ferramentas → Diversos (HTML / JS in v8.1 +) guia Preprocessadores CSS
  2. Digite o caminho para o sass.bat instalado C:\Ruby\bin\sass.bat que clique em Instalar o Sass .
    Confirme suas alterações com Aplicar / OK

Instalando o SASS no Netbeans

  1. Use um já existente ou Crie um Novo Projeto (HTML5, PHP, o que for …).
    Depois que o projeto for criado, abra a janela Projetos .
    Clique com o botão direito do mouse no seu projeto e escolha> Propriedades .
    No pop-up Propriedades do Projeto, selecione Pré-processadores CSS.
    Selecione os arquivos Compile SASS em Salvar.
    (Se você quiser que o compilador minimize automaticamente seu arquivo de resultado .css, use --style compressed sob as Opções do Compilador )

Instalando o SASS no Netbeans

  1. Você pode ver na imagem acima que o compilador usa dois caminhos de pastas padrão Input (watchable) / Output (compilado para destionamento).
    Crie a pasta scss (opcionalmente, a pasta css ) em seu projeto também.

Instalando o SASS no Netbeans

Você está feito!

Assim que você criar um novo arquivo .scss ou salvá-lo, o Netbeans compilará automaticamente o arquivo para .css na pasta /css .

Instalando o SASS no Netbeans