sass - 使用 grunt/steroids 构建 Ionic SASS

Question

我正在尝试使用 Ionic 构建一个原型(prototype)项目和 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.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 文件，其他一些订单。

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

Answer 1

Ionic 导入 ionic.scss 中的所有 scss，因此我在 \node_modules\grunt-steroids\tasks\steroids-compile-sass 中使用此 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'
            }
          ]...