ionic 改变默认颜色

最新推荐文章于 2023-11-14 11:13:01 发布

iteye_21194

最新推荐文章于 2023-11-14 11:13:01 发布

阅读量562

点赞数

CC 4.0 BY-SA版权

分类专栏： ionic 文章标签： ui

本文链接：https://blog.youkuaiyun.com/iteye_21194/article/details/82641849

ionic 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了如何在Ionic工程下修改颜色变量的默认值，并通过使用gulp任务将其转换为CSS文件。包括了具体操作步骤和相关配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ionic 工程下：

www/lib/ionic/scss/_variables.scss是默认的颜色

$light:                           #fff !default;
$stable:                          #f8f8f8 !default;
$positive:                        #387ef5 !default;
$calm:                            #11c1f3 !default;
$balanced:                        #33cd5f !default;
$energized:                       #ff8f3f !default;
$assertive:                       #ef473a !default;
$royal:                           #886aea !default;
$dark:                            #444 !default;


// Base
// -------------------------------

$font-family-sans-serif:          "Helvetica Neue", "Roboto", "Segoe UI", sans-serif !default;
$font-family-light-sans-serif:    "HelveticaNeue-Light", "Roboto-Light", "Segoe UI-Light", sans-serif-light !default;
$font-family-serif:               serif !default;
$font-family-monospace:           monospace !default;

修改变量对应的默认值。

在工程目录下，cmd 中执行：gulp sass

$ gulp sass
[09:01:04] Using gulpfile e:\TestApp\gulpfile.js
[09:01:04] Starting 'sass'...
[09:01:05] Finished 'sass' after 1.26 s

执行完成后，会在www/css下生成相应的css

gulpfile.js如下：

gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass({
      errLogToConsole: true
    }))
    .pipe(gulp.dest('./www/css/'))//目标路径
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});