Construindo Ionic SASS com grunhidos/esteróides
-
21-12-2019 - |
Pergunta
Estou tentando construir um projeto de protótipo usando Iônico e Esteróides Appgyver.Ionic tem um conjunto muito bom de UIs e modelos, construídos sobre AngularJS.E Steroids oferece algumas ferramentas incríveis para testar aplicativos móveis (servidor web integrado para testes locais, implantações automáticas, depuração weinre, integração de emulador, fluxo de trabalho fácil para implantar em dispositivos reais e depurar com weinre).Então, colocá-los juntos pareceu a ideia mais incrível de todas.
Fiz uma tentativa corajosa (detalhada abaixo), que parece promissora.No entanto, quando executo as ferramentas de construção do Steroids, elas tentam compilar o SASS do Ionic e encontram vários erros.
Detalhes....
Acabei de iniciar um novo projeto com Steroids, usando o comando do gerador:
steroids create myApp
Então instalei o Ionic em www/components com:
bower install driftyco/ionic-bower
Então baixei um dos Projetos iniciais iônicos e mesclá-lo manualmente com o código de exemplo do Steroids.Usei o código Ionic, mas redirecionei as inclusões CSS e JS para www/components.Em seguida, copiei as inclusões do código de amostra dos esteróides: steroids.js
, onerror.js
, console.log.js
, cordova.js
.Também copiei os diversos arquivos config.xml.
Posso fazer upload de algum código de exemplo em algum lugar, mas não acho que seja isso que está quebrado.Achei que seria uma boa ideia fornecer algumas informações básicas.Para testar meu monstro de Frankenstein, executei:
steroids connect --serve
que inicia um pequeno servidor web na porta 4000 e abre um link para ele no seu navegador.No entanto, quando o servidor de esteróides está sendo inicializado, ele detecta os arquivos SCSS e tenta compilá-los.Eu realmente não PRECISO deles compilados, já que o pacote bower inclui alguns pré-construídos, mas assim que eu conseguir o básico funcionar, provavelmente vou querer usar o SASS para estilizar o aplicativo, e isso não deve prejudicar nada.
No entanto, recebo os seguintes erros:
Running "steroids-compile-sass" task
SASS files found, attempting to compile them to dist/...
Running "sass:dist" (sass) task
Syntax error: Undefined mixin 'display-flex'.
on line 8 of www/components/ionic/scss/_button-bar.scss, in `display-flex'
from line 8 of www/components/ionic/scss/_button-bar.scss
Use --trace for backtrace.
Syntax error: Undefined variable: "$checkbox-height".
on line 10 of www/components/ionic/scss/_checkbox.scss
Use --trace for backtrace.
Syntax error: Undefined variable: "$z-index-action-sheet".
on line 27 of www/components/ionic/scss/_action-sheet.scss
Use --trace for backtrace.
Syntax error: Undefined variable: "$line-height-base".
on line 8 of www/components/ionic/scss/_form.scss
Use --trace for backtrace.
Syntax error: Undefined mixin 'button-style'.
on line 9 of www/components/ionic/scss/_button.scss, in `button-style'
from line 9 of www/components/ionic/scss/_button.scss
Use --trace for backtrace.
Syntax error: Undefined mixin 'translate3d'.
on line 19 of www/components/ionic/scss/_animations.scss, in `translate3d'
from line 19 of www/components/ionic/scss/_animations.scss
Use --trace for backtrace.
File "dist/components/ionic/scss/_button-bar.css" created.
Warning: Use --force to continue.
Aborted due to warnings.
Syntax error: Undefined mixin 'badge-style'.
on line 8 of www/components/ionic/scss/_badge.scss, in `badge-style'
from line 8 of www/components/ionic/scss/_badge.scss
Use --trace for backtrace.
Syntax error: Undefined mixin 'display-flex'.
on line 8 of www/components/ionic/scss/_bar.scss, in `display-flex'
from line 8 of www/components/ionic/scss/_bar.scss
Use --trace for backtrace.
Então, todos esses mixins e variáveis indefinidos estão presentes na minha base de código, em www/components/ionic/_mixins.scss
e www/components/ionic/_variables.scss
respectivamente.Ambos estão incluídos por www/components/ionic/ionic.scss
.Parece que Ionic espera que você compile ionic.scss e inclua tudo na ordem certa (razoável), mas Steroids (que parece estar usando grunt-contrib-sass
) está tentando compilar todos os arquivos SCSS no diretório, em alguma outra ordem.
Então, existe uma maneira de configurar esteróides ou grunt-contrib-sass
apenas compilar ionic.scss
?Se sim, como?Caso contrário, como posso desativar a compilação SASS em Steroids?
Solução
Ionic importa todos os scss em ionic.scss, então excluí todos _*.scss
da compilação com este hack em \node_modules\grunt-steroids\tasks\steroids-compile-sass.coffee
:
...files: [
{
expand: true
cwd: 'app/'
src: ['**/!(_*).scss', '**/!(_*).sass']
dest: 'dist/'
ext: '.css'
}
{
expand: true
cwd: 'www/'
src: ['**/!(_*).scss', '**/!(_*).sass']
dest: 'dist/'
ext: '.css'
}
]...
Outras dicas
Merituuli do AppGyver aqui.
A maneira como você instalou o Ionic parece desnecessariamente complicada e é isso que provavelmente quebra seu aplicativo.Aqui estão as instruções sobre como fazer o Ionic funcionar em um projeto Steroids sem que os Steroids reclamem de mixins indefinidos:
- Criar projeto de esteróides
- Baixe o CDN da estrutura Ionic em aqui
- Entre no projeto Steroids na pasta
www/vendor
e crie uma nova pasta, por exemplo "ionic" - Copie os arquivos desejados do CDN descompactado para a pasta criada
- Inclua os arquivos css/js necessários em
application.js
/application.css
/cada arquivo html
Isso ajuda?
Depois de ver a mensagem command connect requires to be in a Steroids project directory
Eu me perguntei: o que torna um diretório um projeto esteróide?O que me levou a outro caminho
- Copie o diretório de configuração de um projeto de esteróides
- Cole-o no diretório do seu projeto iônico (próximo, mas NÃO dentro do diretório www)
- Copie o arquivo www/loading.html de um projeto de esteróides
- Cole-o no diretório www/ (ao lado de index.html)
- Correr
steroids connect
Isso inicia um script de migração de projeto de esteróides que verifica se há erros em seu projeto, incluindo atualizações em seus arquivos Gruntfile.js e package.json (alguma intervenção manual pode ser necessária), o que é absolutamente brilhante.
Não pensei que seria tão simples ou que haveria um script de migração - obrigado equipe AppGyver!