Javascript 无法覆盖SASS!默认变量?

Javascript 无法覆盖SASS!默认变量?,javascript,sass,gulp,gulp-sass,Javascript,Sass,Gulp,Gulp Sass,我正在使用Gulp的GulpRuby 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

我正在使用Gulp的GulpRuby 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'));
});
app/assets/_variables.scss

$OpenSansPath: "/fonts";
@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";
$OpenSansPath: "./fonts" !default;
$OpenSansVersion: "1.1.0" !default; 
app/assets/vendor/open sans fontface/sass/_variables.scss

$OpenSansPath: "/fonts";
@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";
$OpenSansPath: "./fonts" !default;
$OpenSansVersion: "1.1.0" !default; 
app/assets/vendor/open sans fontface/sass/_variables.scss

$OpenSansPath: "/fonts";
@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";
$OpenSansPath: "./fonts" !default;
$OpenSansVersion: "1.1.0" !default; 

创建main.scss文件,如下所示:

@import "app/assets/vendor/open-sans-fontface/open-sans.scss";
@import "app/assets/_variables.scss";
然后更新your 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'));
});

但是为什么你认为我上面发布的代码不起作用?这是因为语法吗?这很可能是html页面加载正在创建的css文件的方式。像这样使用
main.scss
是很常见的,只剩下一个
.css
文件来处理。