如何使SASS变量在Ionic项目中工作？

如何解决如何使SASS变量在Ionic项目中工作？

我终于需要SASS变量，所以我试图让它们第一次工作，但是它们似乎没有被加载，或者如果它们正在被加载，则它们没有被翻译。

这是一个与Ionic CLI v6.10.1一起运行的Ionic v1应用程序

这是我的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文件中，但是在重新编译应用程序后，它仍然无法正常工作。 / p>

我在做什么错了？

解决方法

我终于想通了。

将所有变量放入./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">