A partir da atualização de ontem (do meu servidor hospedado em https://doomemacs.discourse.group), nenhum dos meus CSS personalizados está sendo aplicado. Alterações no meu tema(s) ou no CSS dos componentes não têm efeito (embora alterações no <head> ou em outras seções HTML funcionem normalmente).
Há uma tag link suspeita apontando para uma folha de estilo vazia, cujo hash muda toda vez que altero meu CSS. Parece que o Discourse está falhando silenciosamente ao compilar minhas folhas de estilo. Não há menções de falhas nos meus logs de erro e o discourse_theme faz o upload das minhas folhas de estilo sem reclamar, mas sem nenhum efeito.
Alguém da administração poderia, por gentileza, dar uma olhada?
Olá @hlissner, estou trabalhando em uma correção para isso. Uma atualização recente do core quebrou o componente do tema na sua instância. Deverei ter uma correção em breve.
A correção já foi mesclada no núcleo e seu site foi implantado, @hlissner. Observe que desabilitei dois componentes de tema: o que contém estilos personalizados (que você pode reativar) e o discourse-theme-category-homepage, que precisa ser atualizado na fonte antes que você possa ativá-lo. Mais detalhes sobre isso em Enhanced category-box display component - #7 by pmusaraj
Obrigado! As folhas de estilo agora carregam corretamente, no entanto, as variáveis de cor do SCSS não parecem herdar o esquema de cores do meu tema. Por exemplo, $secondary retorna seu valor padrão, #ffffff, em vez de #282c34. Será que isso é mais um regression de e8b8272?
Sim, é outra regressão. A correção é um pouco complicada… e, para a grande maioria das variáveis de cor, os componentes de tema devem usar propriedades CSS personalizadas. Você pode consultar este guia Update themes and plugins to support automatic dark mode para uma visão geral e alguns exemplos sobre como adicionar variações de cores personalizadas em um arquivo especial color_definitions.scss no seu componente de tema.
Existe uma maneira melhor de contornar isso? Poderia adicionar estilos diretamente a cada tema, mas pretendo ter muitos, e prefiro tratar alguns casos gerais a partir de um componente central e global, sempre que possível.
Sim, faz sentido. Você tentou adicionar esse SCSS acima em um novo arquivo em common/color_definitions.scss? Deve funcionar normalmente se você o adicionar lá. (Também há uma guia na interface para essa folha de estilo especial.)
Estava prestes a tentar exatamente isso, quando o Discourse caiu com a mensagem ‘O software que alimenta este fórum de discussão encontrou um problema inesperado’, haha.
Isso funcionou! As variáveis de cor estão configuradas corretamente no escopo de color_definitions.scss. O único problema é que não consigo importar outros arquivos de estilo a partir dele. Por exemplo:
Obrigado pela sua ajuda! O PR foi mesclado, minha instância foi atualizada e consigo importar folhas de estilo em color_definitions.scss, mas esse problema voltou a aparecer:
Desta vez, isso afeta também as variáveis em color_definitions.scss.
É possível fazer o que você está tentando sem herdar as variáveis SCSS do tema pai? Esse é um caso de uso muito específico e eu preferiria não adicionar essa complexidade ao núcleo.
É certamente possível, apenas inconveniente, pois exigirá centenas de linhas de código SCSS repetitivo por tema (e um sistema de build para compartilhar variáveis entre todos eles) que não eram necessários há uma semana. Dito isso, provavelmente seria melhor fazer isso de qualquer maneira, para evitar problemas com futuras refatorações do processo de build do Discourse. Vou fazer isso. Obrigado!
Esse guia está um pouco desatualizado, sim. No entanto, o que está causando problemas no seu caso não são variáveis principais, mas sim cores SCSS em um componente que não herda o esquema de cores do tema. (Mesmo assim, vou revisar o guia e atualizá-lo.)
Um pouco de contexto: em agosto/setembro de 2020, migramos para o uso de propriedades personalizadas de CSS para cores. A principal razão para essa mudança foi permitir o suporte a modo escuro automático de forma leve e rápida. Temas têm CSS e JS, então não podem ser alternados rapidamente, mas, usando propriedades personalizadas de CSS, os esquemas de cores podem ser invertidos instantaneamente, sem recarregar a página.
Vejo no seu site que você tem 4 temas, cada um com um esquema de cores, e um componente compartilhado entre os temas para os estilos comuns. Você poderia alcançar essencialmente a mesma coisa com um único tema principal (que conteria todos os estilos compartilhados) e 4 esquemas de cores selecionáveis pelo usuário. Você precisaria mover todos os cálculos de cores no arquivo color_definitions.scss do tema principal, mas é viável. Vou tentar encontrar um tempo e tentar isso amanhã.
Isso seria ideal, mas cheguei à configuração atual porque múltiplos esquemas de cores não funcionaram para mim. Alguns esquemas de cores produzem cores ruins para variáveis geradas automaticamente, como --primary-low. Simplesmente redefinir a variável pode funcionar para um esquema de cores, mas não para outro. Uma solução mais geral é possível se a redefinirmos com base em $primary, ou condicionalmente com base no ID/nome do esquema de cores, mas sem isso, múltiplos temas são necessários, para que eu possa ter um color_definitions.scss por tema (a duplicação que gostaria de evitar). Ou há uma opção melhor que estou perdendo?
