为啥添加自定义 SASS 变量在 Ionic 中不起作用？

Posted 2023-03-07

【中文标题】为啥添加自定义 SASS 变量在 Ionic 中不起作用？

【英文标题】：Why adding custom SASS variables does not work in Ionic?为什么添加自定义 SASS 变量在 Ionic 中不起作用？

【发布时间】：2014-12-09 21:06:51

【问题描述】：

我使用 -s 选项设置了一个新的 ionic 项目以启用 SASS。

这是我的 /myproject/scss.ionic.app.scss 的一部分：

...
$positive:                        #2a8000 !default;
$button-font-size:                30px !default;

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";

保存这个 scss 文件时，我可以在 shell 中看到 sass 已启动并且 css 已重新构建：

[00:18:18] Starting 'sass'...
CSS changed:  www/css/ionic.app.css
[00:18:18] Finished 'sass' after 330 ms
CSS changed:  www/css/ionic.app.min.css

但是，无论我在 scss 文件中放入什么，新的 css 文件似乎都完全相同。

你能解释一下为什么吗？ 非常感谢。

【问题讨论】：

愚蠢的问题，但是您是否删除了默认存在于 scss 文件中的该块周围的 /*..*/ 注释块，我猜是的，但只是检查

谢谢，但我发现了我犯的愚蠢错误:)

【参考方案1】：

真是太蠢了……

我没有注意到 SASS 在www/css/ionic.app.css 中生成新的 css 但是，默认的 ionic index.html 中包含的文件是lib/ionic/css/ionic.css

唯一要做的就是写 <link href="css/ionic.app.css" rel="stylesheet"> in index.html

并删除 <link href="lib/ionic/css/ionic.css" rel="stylesheet">

【讨论】：

我遇到了同样的问题，但我在learn.ionicframework.com/videos/sass 找到了答案，使用ionic setup sass 如图所示是视频。

【参考方案2】：

为了在我的项目中解决这个问题，我必须先安装 gulp。

npm install -g gulp