使用 grunt/steroids 构建 Ionic SASS
-
21-12-2019 - |
题
我正在尝试使用构建一个原型项目 离子 和 Appgyver 类固醇. 。Ionic 有一组非常好的 UI 和模板内容,构建在 AngularJS 之上。Steroids 提供了一些很棒的工具来测试移动应用程序(内置 Web 服务器用于本地测试、自动部署、weinre 调试、模拟器集成、部署到真实设备的简单工作流程以及使用 weinre 进行调试)。因此,将它们放在一起听起来是有史以来最棒的想法。
我做了一次勇敢的尝试(详见下文),看起来很有希望。然而,当我运行 Steroids 构建工具时,它们尝试编译 Ionic 的 SASS,并遇到了一堆错误。
细节....
我刚刚使用 Steroids 启动了一个新项目,使用他们的生成器命令:
steroids create myApp
然后,我在 www/components 中安装了 Ionic:
bower install driftyco/ionic-bower
然后,我下载了其中一个 离子启动项目 并手动将其与 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,并让它以正确的顺序(合理)包含所有内容,但是类固醇(似乎正在使用 grunt-contrib-sass
)正在尝试以其他顺序编译目录中的所有 SCSS 文件。
那么,有没有办法配置类固醇或 grunt-contrib-sass
只是编译 ionic.scss
?如果是这样,怎么办?如果做不到这一点,我如何禁用 Steroids 中的 SASS 编译?
解决方案
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'
}
]...
其他提示
来自 AppGyver 的 Merituuli 在这里。
您安装 Ionic 的方式似乎不必要地复杂,这可能会破坏您的应用程序。以下是有关如何让 Ionic 在 Steroids 项目中工作而不让 Steroids 抱怨未定义 mixins 的说明:
- 创建类固醇项目
- 从以下位置下载 Ionic 框架 CDN 这里
- 进入 Steroids 项目文件夹
www/vendor
并创建一个新文件夹,例如“ionic” - 将解压后的 CDN 中所需的文件复制到创建的文件夹中
- 包含必要的 css/js 文件
application.js
/application.css
/每个html文件
这有帮助吗?
看到消息后 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 团队!