Edificio Iónica SASS con grunt/esteroides

StackOverflow https://stackoverflow.com//questions/23038467

Pregunta

Estoy tratando de construir un prototipo de proyecto con Iónica y Appgyver Esteroides.Iónica tiene un conjunto muy agradable de la UIs y de la plantilla de cosas, construido en la cima de AngularJS.Y los Esteroides ofrece unas impresionantes herramientas para pruebas de aplicaciones móviles (servidor web incorporado para pruebas locales, automático implementaciones, weinre de depuración, emulador de integración, flujo de trabajo sencillo para implementar en dispositivos reales y depuración con weinre).Así ponerlos juntos sonaba como el más impresionante de la idea.

Me hizo un valiente intento (detallado a continuación), que parece prometedor.Sin embargo, cuando ejecuto los Esteroides herramientas de construcción, que intente compilar Iónica del SASS, y encuentro un montón de errores.

Detalles....

Acabo de empezar un proyecto nuevo con Esteroides, utilizando su generador de comandos:

steroids create myApp

Entonces, he instalado Iónica en www/componentes:

bower install driftyco/ionic-bower

Entonces, he descargado una de las Iónica de arranque de los proyectos y mezclar manualmente con los Esteroides código de ejemplo.He utilizado el Iónica código, pero redirigidos a la CSS y JS incluye a www/componentes.Luego he copiado los incluye a partir de la muestra de los Esteroides código: steroids.js, onerror.js, console.log.js, cordova.js.También he copiado los surtidos config.xml los archivos.

Puedo cargar el código de ejemplo en algún lugar, pero no creo que en realidad lo que está roto.Sólo pensé que sería una buena idea proporcionar algunos antecedentes.Con el fin de probar mi el monstruo de Frankenstein, me encontré:

steroids connect --serve

que se inicia un pequeño servidor web en el puerto 4000 y abre un enlace en su navegador.Sin embargo, cuando los esteroides servidor se está iniciando, se detecta la SECS archivos y trata de una compilación de las mismas.Yo realmente no los NECESITAN compilado, desde la glorieta paquete incluye la pre-construcción, pero una vez que tengo los conceptos básicos de trabajo, yo probablemente quiera usar SASS al estilo de la app, y no duele nada.

Sin embargo, me da los siguientes errores:

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.

Así, todas las indefinido mixins y variables que están presentes en mi base de código, en virtud de www/components/ionic/_mixins.scss y www/components/ionic/_variables.scss respectivamente.Ambos están incluidos en el precio www/components/ionic/ionic.scss.Parece Iónica espera de la compilación iónico.secs, y deje que se incluyen de todo, en el orden correcto (razonable), pero Esteroides (que parece ser el uso de grunt-contrib-sass) está tratando de compilar todas las SECS archivos en el directorio, en algún otro orden.

Así, hay una manera de configurar los Esteroides o grunt-contrib-sass a solo compile ionic.scss?Si es así, ¿cómo?En su defecto, ¿cómo puedo desactivar el SASS de compilación en los Esteroides?

¿Fue útil?

Solución

Iónica de las importaciones de todas las secs iónica.secs, así que me excluidos todos _*.scss a partir de la compilación con este hack en \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'
            }
          ]...

Otros consejos

Merituuli de AppGyver aquí.

La manera de instalar Iónica parece innecesariamente complicado y eso es lo que, probablemente, se rompe su aplicación.Aquí las instrucciones sobre cómo obtener Iónica de trabajo dentro de una Esteroides proyecto sin Esteroides quejarse indefinido mixins:

  1. Crear Esteroides proyecto
  2. Descargar Iónica marco de la CDN de aquí
  3. Ir a los Esteroides proyecto en la carpeta www/vendor y crear una nueva carpeta, por ejemplo "iónica"
  4. Copia los archivos que desee desde la descomprimido CDN a la carpeta creada
  5. Incluir la necesaria archivos css/js en application.js/application.css/cada archivo html

¿Esta ayuda?

Después de ver el mensaje command connect requires to be in a Steroids project directory Me preguntaba, ¿qué hace que un directorio de un esteroide proyecto?Lo que me llevó a otra forma

  • Copia el directorio config de un proyecto de esteroides
  • Pegar en su iónica directorio del proyecto (continuación pero NO dentro del directorio www)
  • Copia de la www/loading.html archivo de un proyecto de esteroides
  • Pegarlo en el directorio www/ (junto a index.html)
  • Ejecutar steroids connect

Esto inicia una esteroides proyecto de migración de script que comprueba su proyecto de errores, incluyendo las actualizaciones de su Gruntfile.js y el paquete.json archivos (algunos intervención manual puede ser necesario) que es absolutamente brillante.

No pensé que sería tan sencillo o un script de migración - gracias AppGyver equipo!

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top