Construindo Ionic SASS com grunhidos/esteróides

Question

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?

Answer 1

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'
            }
          ]...

Answer 2

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:

1. Criar projeto de esteróides
2. Baixe o CDN da estrutura Ionic em aqui
3. Entre no projeto Steroids na pasta www/vendor e crie uma nova pasta, por exemplo "ionic"
4. Copie os arquivos desejados do CDN descompactado para a pasta criada
5. Inclua os arquivos css/js necessários em application.js/application.css/cada arquivo html

Isso ajuda?

Answer 3

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!