CODEWITHSUNDEEP
javascriptsassgulpgulp-sass
AlGallaf
AlGallaf

Reputation: 635

Cannot overwrite SASS !default variable?

I’m using Gulp’s gulp-ruby-sass to generate CSS files. I'm unable to overwrite variables in open-sans.scss. Here’s the code:

gulpfile.js

gulp.task('css', function () {
    return gulp.src(['app/assets/_variables.scss','app/assets/vendor/open-sans-fontface/open-sans.scss'])
        .pipe(sass())
        .on('error', function (err) { console.log(err.message); })
        .pipe(gulp.dest('public/css'));
});

app/assets/_variables.scss

$OpenSansPath: "/fonts";

app/assets/vendor/open-sans-fontface/sass/_variables.scss

@import "sass/variables";
@import "sass/mixins";
@import "sass/Light";
@import "sass/LightItalic";
@import "sass/Regular";
@import "sass/Italic";
@import "sass/Semibold";
@import "sass/SemiboldItalic";
@import "sass/Bold";
@import "sass/BoldItalic";
@import "sass/ExtraBold";
@import "sass/ExtraBoldItalic";

app/assets/vendor/open-sans-fontface/sass/_variables.scss

$OpenSansPath: "./fonts" !default;
$OpenSansVersion: "1.1.0" !default;

Upvotes: 1

Views: 976

Answers (1)

Rupert
Rupert

Reputation: 1639

Create a main.scss file like this:

@import "app/assets/vendor/open-sans-fontface/open-sans.scss";
@import "app/assets/_variables.scss";

Then update the your files array to only include the main file:

gulp.task('css', function () {
    return gulp.src(['app/assets/main.scss'])
        .pipe(sass())
        .on('error', function (err) { console.log(err.message); })
        .pipe(gulp.dest('public/css'));
});

Upvotes: 2

Related Questions