I finally had a need for SASS vars so I am trying to get them to work for the first time.
Here is my gulpfile.js:
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']);
});
And in my projectRoot/scss/ionic.app.scss file I have:
$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";
And for my first scss variable, I added one to a class for a custom color:
.button-custom {
background-color: $eBlue;
}
But its not working. Inspecting the element I see button-custom
applied to the button I am trying to change, but the background-color: $eBlue ;
is striked out.
At the beginning of the ionic build android
output I see:
[23:27:44] Invoking sass gulp task.
What am I doing wrong?