2

我正在尝试使用IonicAppgyver Steroids构建一个原型项目。Ionic 有一套非常好的 UI 和模板,建立在 AngularJS 之上。Steroids 提供了一些很棒的工具来测试移动应用程序(用于本地测试的内置 Web 服务器、自动部署、weinre 调试、模拟器集成、部署到真实设备和使用 weinre 调试的简单工作流程)。所以把它们放在一起听起来是有史以来最棒的主意。

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

细节....

我刚刚开始使用 Steroids 的新项目,使用他们的生成器命令:

steroids create myApp

然后,我在 www/components 中安装了 Ionic:

bower install driftyco/ionic-bower

然后,我下载了一个Ionic 入门项目并手动将其与 Steroids 示例代码合并。我使用了 Ionic 代码,但将 CSS 和 JS 包含重定向到 www/components。然后我从示例 Steroids 代码中复制了包含:steroids.js, onerror.js, console.log.js, cordova.js. 我还复制了各种 config.xml 文件。

我可以在某处上传一些示例代码,但我认为这实际上并不是问题所在。我只是认为提供一些背景是个好主意。为了测试我的科学怪人的怪物,我跑了:

steroids connect --serve

它在端口 4000 上启动一个小型 Web 服务器,并在浏览器中打开一个指向它的链接。然而,当 steroids 服务器启动时,它会检测 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.

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

那么,有没有办法配置 Steroids 或grunt-contrib-sass只编译ionic.scss?如果是这样,怎么做?如果做不到这一点,我该如何禁用 Steroids 中的 SASS 编译?

4

3 回答 3

3

Ionic 在 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'
            }
          ]...
于 2014-04-27T12:38:41.713 回答
2

来自 AppGyver 的 Merituuli。

您安装 Ionic 的方式似乎不必要地复杂,这可能会破坏您的应用程序。下面是关于如何让 Ionic 在 Steroids 项目中工作的说明,而不需要 Steroids 抱怨未定义的 mixin:

  1. 创建类固醇项目
  2. 从这里下载 Ionic 框架 CDN
  3. 进入 Steroids 项目进入文件夹www/vendor并创建一个新文件夹,例如“ionic”
  4. 将解压后的 CDN 中的所需文件复制到创建的文件夹中
  5. application.js//application.css每个html文件中包含必要的css/js文件

这有帮助吗?

于 2014-04-14T13:57:41.437 回答
0

看到消息后command connect requires to be in a Steroids project directory我想知道,是什么让目录成为类固醇项目?这导致我另辟蹊径

  • 从类固醇项目复制配置目录
  • 将其粘贴到您的 ionic 项目目录中(下一个但不在 www 目录中)
  • 从类固醇项目中复制 www/loading.html 文件
  • 将其粘贴到 www/ 目录(index.html 旁边)
  • steroids connect

这将启动一个类固醇项目迁移脚本,它检查您的项目是否存在错误,包括更新您的 Gruntfile.js 和 package.json 文件(可能需要一些手动干预),这非常棒。

我没想到会这么简单,或者会有一个迁移脚本 - 感谢 AppGyver 团队!

于 2014-10-24T08:10:58.967 回答