Resumindo: você obtém o erro atrevido “mixin indefinido” e tem certeza de que esse mixin está no escopo? Verifique todos os seus arquivos parciais sass para um sublinhado principal. Se não, o sass tentará compilar esta parcial com seu próprio escopo, que provavelmente não possui todos os mixins globais e outros dados. Bastante óbvio, mas fácil de perder em uma estrutura de pastas maior.
–
Usando a gema do intermediário, tive um problema durante o processo de construção. Recebi um erro “mixin indefinido” mesmo que o servidor de desenvolvimento estivesse funcionando sem nenhum problema.
Meu arquivo principal styles.css.scss tem um @import “base / base” que importa algumas configurações, mixins globais e mais.
Portanto, essas configurações e mixins devem estar no escopo para cada importação seguinte em styles.css.scss. Eu realmente me perguntei quando encontrei esse problema. Minha primeira solução foi muito suja, impulsiva e muito ERRADA . Eu localizei os arquivos scss que causaram o problema, joguei um rápido @import “base / some / mixin”. Agora o mixin foi encontrado. Fiz isso para uma dúzia de arquivos. E adivinha? Eu me perguntei por que meus arquivos css exportados estavam tão inchados. Eu tenho cerca de 25.000 linhas de css. Bem, muitos deles eram saída de depuração sass. Mas mesmo sem contá-los meu css fiel era bem grande.
A segunda anbormalidade que identifiquei foi esta em meus styles.css compilados:
@import url(http://fonts.googleapis.com/css?family=Merriweather:300);
@import url(http://fonts.googleapis.com/css?family=Merriweather:300);
@import url(http://fonts.googleapis.com/css?family=Merriweather:300);
@import url(http://fonts.googleapis.com/css?family=Merriweather:300);
@import url(http://fonts.googleapis.com/css?family=Merriweather:300);
@import url(http://fonts.googleapis.com/css?family=Merriweather:300);
@import url(http://fonts.googleapis.com/css?family=Merriweather:300);
@import url(http://fonts.googleapis.com/css?family=Merriweather:300);
@import url(http://fonts.googleapis.com/css?family=Merriweather:300);
@import url(http://fonts.googleapis.com/css?family=Merriweather:300);
@import url(http://fonts.googleapis.com/css?family=Merriweather:300);
@import url(http://fonts.googleapis.com/css?family=Merriweather:300);
/* normalize.css v2.0.1 | MIT License | git.io/normalize */Então, algo estava realmente errado. Esta importação está localizada em “base / fonts” e pode ser importada apenas uma vez durante o meu @import “base / base” inicial
Solução???
Eu descobri que tinha alguns arquivos scss sem um sublinhado inicial. Claro! Esse é o problema. Durante a compilação, o sass tentou compilar esses arquivos como uma folha de estilo separada com um escopo separado – faltando toda a importação global do meu arquivo styles.css.scss principal.
Eu adicionei o sublinhado que faltava àqueles parciais de scss, limpei todas as minhas importações colocadas por engano e voilá menos de 2500 linhas, incluindo a saída de depuração sass compacta. Ufa ..