无法覆盖SASS!默认变量?

时间:2014-12-29 16:37:58

标签: javascript sass gulp gulp-sass

我正在使用Gulp的gulp-ruby-sass来生成CSS文件。我无法在open-sans.scss中覆盖变量。这是代码:

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'));
});

应用程序/资产/ _variables.scss

$OpenSansPath: "/fonts";

应用程序/资产/供应商/开放的SAN-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";

应用程序/资产/供应商/开放的SAN-fontface / SASS / _variables.scss

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

1 个答案:

答案 0 :(得分:2)

像这样创建一个main.scss文件:

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

然后将您的files数组更新为仅包含主文件:

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'));
});