Question

我正在尝试使用Ionic和Appgyver Steroids构建原型项目。 Ionic有一套非常好的UI和模板，建立在AngularJS之上。 Steroids提供了一些用于测试移动应用程序的强大工具（内置Web服务器，用于本地测试，自动部署，调试，模拟器集成，轻松工作流程以部署到实际设备并使用weinre进行调试）。所以把它们放在一起听起来就像是有史以来最棒的想法。

我做了一个勇敢的尝试（详见下文），看起来很有希望。但是，当我运行Steroids构建工具时，他们会尝试编译Ionic的SASS，并遇到一堆错误。

...详细

我刚刚使用他们的生成器命令启动了一个使用Steroids的新项目：

steroids create myApp

然后，我在www / components中安装了Ionic：

bower install driftyco/ionic-bower

然后，我下载了Ionic starter projects之一并手动将其与Steroids示例代码合并。我使用了Ionic代码，但重定向了CSS和JS包含到www / components。然后我复制了样本类固醇代码中的包含：steroids.js，onerror.js，console.log.js，cordova.js。我还复制了各种config.xml文件。

我可以在某处上传一些示例代码，但我认为这实际上并没有破坏。我只是认为提供一些背景是个好主意。为了测试我的弗兰肯斯坦的怪物，我跑了：

steroids connect --serve

在端口4000上启动一个小型Web服务器，并在浏览器中打开一个指向它的链接。但是，当类固醇服务器启动时，它会检测SCSS文件并尝试编译它们。我不需要编译它们，因为bower包包含预先构建的包，但是一旦我掌握了基础知识，我可能会想要使用SASS来设置应用程序的样式，它不应该伤害任何东西。

但是，我收到以下错误：

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.

因此，所有这些未定义的mixin和变量都存在于我的代码库中，分别位于www/components/ionic/_mixins.scss和www/components/ionic/_variables.scss下。这些都包含在www/components/ionic/ionic.scss中。看起来Ionic希望你编译ionic.scss，并让它包含正确的顺序（合理），但Steroids（似乎使用grunt-contrib-sass）试图编译目录中的所有SCSS文件，以其他顺序。

那么，有没有办法配置类固醇或grunt-contrib-sass来编译ionic.scss？如果是这样，怎么样？如果做不到这一点，我如何禁用类固醇中的SASS编译？

Answer 1

离子导入ionic.scss中的所有scss，所以我在_*.scss中使用此hack从编译中排除了所有\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

来自AppGyver的Merituuli。

你安装Ionic的方式似乎不必要地复杂，这可能会破坏你的应用程序。这里有关于如何在Steroids项目中使用Ionic工作的说明，没有类固醇抱怨未定义的mixins：

创建类固醇项目
从here
进入Steroids项目进入文件夹www/vendor并创建一个新文件夹，例如“ionic”
将您想要的文件从解压缩的CDN复制到创建的文件夹
在application.js / application.css /每个html文件中包含必要的css / js文件

这有帮助吗？

Answer 3

看到消息command connect requires to be in a Steroids project directory我想知道，是什么使目录成为类固醇项目？这导致我采取另一种方式

从类固醇项目中复制config目录
将其粘贴到您的离子项目目录中（下一个但不在www目录中）
从类固醇项目中复制www / loading.html文件
将其粘贴到www /目录（index.html旁边）
运行steroids connect

这会启动一个类固醇项目迁移脚本，它会检查项目是否存在错误，包括对Gruntfile.js和package.json文件的更新（可能需要一些人工干预），这绝对是非常棒的。

我认为它不会那么简单，或者会有迁移脚本 - 感谢AppGyver团队！

用咕噜/类固醇建立离子SASS

3 个答案: