CODEWITHSUNDEEP
htmlcssionic-frameworksass
rolinger
rolinger

Reputation: 3068

How to get SASS variables working in Ionic project?

I finally have a need for SASS vars so I am trying to get them to work for the first time, but they don't appear to be loading, or if they are being loaded they aren't being translated.

It's an Ionic v1 app, running with Ionic CLI v6.10.1

Here is my 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']);
});

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 to test 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.

After further reading on SASS vars in Ionic, I then added my custom variables to the www/lib/ionic/scss/_variables.scss file thinking I have my variables in the wrong location, but after I recompiled my app it still wasn't working.

What am I doing wrong?

Upvotes: 2

Views: 290

Answers (1)

rolinger
rolinger

Reputation: 3068

I finally figured it out.

Put all your variables into the ./scss/ionic.app.scss file.

From CLI of project, run gulp sass - this copies a new file to ./css/ionic.app.css with all your variables applied throughout the custom css file.

In HTML index.html - remove: <link href="lib/ionic/css/ionic.css" rel="stylesheet">

And add: <link href="css/ionic.app.css" rel="stylesheet">

Upvotes: 1

Related Questions