html - 如何让 SASS 变量在 Ionic 项目中工作?
问题描述
我终于需要 SASS 变量,所以我试图让它们第一次工作,但它们似乎没有加载,或者如果它们正在加载,它们没有被翻译。
这是一个 Ionic v1 应用程序,使用 Ionic CLI v6.10.1 运行
这是我的 gulpfile.js (Gulp v4):
var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCss = require('gulp-clean-css');
var rename = require('gulp-rename');
var paths = {
sass: ['./scss/**/*.scss']
};
gulp.task('default', ['sass']);
gulp.task('sass', function(done) {
gulp.src('./scss/ionic.app.scss')
.pipe(sass())
.on('error', sass.logError)
.pipe(gulp.dest('./www/css/'))
.pipe(cleanCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('./www/css/'))
.on('end', done);
});
gulp.task('watch', ['sass'], function() {
gulp.watch(paths.sass, ['sass']);
});
在我的 projectRoot/scss/ionic.app.scss 文件中,我有:
$tabs-icon-size: 25px !default;
$tabs-height: 35px !default;
$eBlue: #192a67;
$eBlueRGB: 25, 42, 103;
$eYellow: #f8d294;
$eYellowRGB: 248, 210, 148;
$eOrange: #f5aa07;
$eOrangeRGB: 245,168,7;
// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "../lib/ionic/fonts" !default;
// Include all of Ionic
@import "www/lib/ionic/scss/ionic";
为了测试我的第一个 scss 变量,我在一个类中添加了一个自定义颜色:
.button-custom {
background-color: $eBlue;
}
但它不起作用。检查我看到button-custom
的应用于我要更改的按钮的元素,但它background-color: $eBlue ;
被删除了。
在ionic build android
输出的开头,我看到:
[23:27:44] Invoking sass gulp task.
在进一步阅读 Ionic 中的 SASS vars 之后,我将自定义变量添加到www/lib/ionic/scss/_variables.scss
文件中,以为我的变量位于错误的位置,但是在重新编译我的应用程序后它仍然无法正常工作。
我究竟做错了什么?
解决方案
我终于弄明白了。
将所有变量放入./scss/ionic.app.scss
文件中。
从项目的 CLI 运行gulp sass
- 这会将新文件复制到./css/ionic.app.css
整个自定义 css 文件中应用的所有变量。
在 HTML index.html 中 - 删除:<link href="lib/ionic/css/ionic.css" rel="stylesheet">
并添加:<link href="css/ionic.app.css" rel="stylesheet">
推荐阅读
- flutter - 在 Flutter 中更新文本小部件
- ios - 更改单个标签栏图标的 unselectedItemTintColor
- javascript - 尝试从 react js fetch 命令访问节点 js req.session 时不起作用
- python - 检查令牌(在熊猫列上)是否在三元组的外部列表中
- python - 条件返回查询
- laravel - 创建变量 laravel
- java - 如何将事件中心输出构建到 Java 函数并将消息捕获到存储?
- java - 使用 Loopj 实现向主线程返回 Http 响应开始新的活动(意图)
- python-3.x - 在 python 列表中反转未按预期工作
- c++ - 如何从 C 调用 C++ 函数?