使用 grunt/steroids 构建 Ionic SASS答案

【问题标题】：Building Ionic SASS with grunt/steroids使用 grunt/steroids 构建 Ionic SASS
【发布时间】：2014-05-27 03:16:30
【问题描述】：

我正在尝试使用Ionic 和Appgyver Steroids 构建原型项目。 Ionic 有一套非常好的 UI 和模板，建立在 AngularJS 之上。 Steroids 提供了一些很棒的工具来测试移动应用程序（用于本地测试的内置 Web 服务器、自动部署、weinre 调试、模拟器集成、部署到真实设备和使用 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 代码中复制了包含：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.

所以，所有这些未定义的 mixin 和变量都存在于我的代码库中，分别位于 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 编译？

【问题讨论】：

嗯...找到了这个：muut.com/appgyver#!/steroids#disable-sass-compile 但我必须记住每次都添加该命令行开关。诚然，我现在正在分裂头发，但是有没有办法可以为项目永久指定此选项，就像我可以在 config/application.coffee 中看到的那样？

标签： sass gruntjs bower ionic-framework steroids

【解决方案1】：

Ionic 在 ionic.scss 中导入所有 scss，因此我在 \node_modules\grunt-steroids\tasks\steroids-compile-sass.coffee 中使用此 hack 从编译中排除了所有 _*.scss ：

 ...files: [
            {
              expand: true
              cwd: 'app/'
              src: ['**/!(_*).scss', '**/!(_*).sass']
              dest: 'dist/'
              ext: '.css'
            }
            {
              expand: true
              cwd: 'www/'
              src: ['**/!(_*).scss', '**/!(_*).sass']
              dest: 'dist/'
              ext: '.css'
            }
          ]...

【讨论】：

这看起来正是我所需要的。现在没有时间测试它，但它看起来很棒。
现已合并，github.com/AppGyver/grunt-steroids/pull/…
这有多酷？！？！？你赢得了互联网先生！也谢谢你。

【解决方案2】：

来自 AppGyver 的 Merituuli。

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

创建 Steroids 项目
从here下载Ionic框架CDN
进入 Steroids 项目的文件夹 www/vendor 并创建一个新文件夹，例如“ionic”
将解压后的CDN中需要的文件复制到创建的文件夹中
在application.js/application.css/每个html文件中包含必要的css/js文件

这有帮助吗？

【讨论】：

好吧，我想这会奏效。我用 Bower 安装了 Ionic，因为 Ionic 似乎正处于非常繁重的开发阶段，所以我想我可能想要经常更新它，直到它稳定下来。此外，在某些时候，我会想要自定义外观，这需要进入 SASS。您的建议看起来会让我开始构建我的应用程序，这很重要。我猜仍然希望有一个独角兽解决方案。

【解决方案3】：

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

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

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

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

【讨论】：