Question

我有一个运行这些SCSS文件的GULP处理目录，但是当我运行GULP时它仍然会抛出错误

错误：未定义的变量：＆＃34; $ hover-color＆＃34;。在src / scss / styles.scss的第18行

InputStream is = getContentResolver().openInputStream(inputFile);

但是当我在SassMeister中运行它似乎工作正常！

如果有人可以提供帮助......

代码位于git：https://gist.github.com/cwjones73/c5268f3bb40654a43696a50b33592cce

对于那些无法访问git的人我已经添加了这些：

gulpfile.js

  color:$hover-color;

/src/scss/style.scss

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'])
        .pipe(sass())
        .pipe(gulp.dest("src/css"))
        .pipe(browserSync.stream());
});

// Move the javascript files into our /src/js folder
gulp.task('js', function() {
    return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/popper.js/dist/umd/popper.min.js'])
        .pipe(gulp.dest("src/js"))
        .pipe(browserSync.stream());
});

// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {

    browserSync.init({
        //server: "http://localhost/wordpres/",
        proxy: "http://localhost/isGulp/bs4/src"
    });

    gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], ['sass']);
    gulp.watch("**/*.php").on('change', browserSync.reload);
});

gulp.task('default', ['js','serve']);

/src/scss/_variables.scss

@import "_variables.scss";

body {
    background: $bg-color;
}
h1{
  font-size: $sizeofheader;
  color:$header-color;
}
h2{
  font-size:$sizeofheader - 7px;
  color:$header-color;
}
a{
  color:$link-color;
    &:hover{
      color:$hover-color;
    }
}

的index.html

$bg-color: red; 

$sizeofheader: 28px;
$header-height: 150px;

$color-yellow: yellow;
$color-red: purple;
$color-white: white;

$header-color: $color-yellow;
$link-color: $color-red;
$hover-color: $color-white;

Answer 1

感谢您的所有帮助。我确信这些错误检测在未来的项目中会派上用场，尽管我已经想到了这个问题。

我正在运行bootstrap 4并且它似乎已经有变量：$ hover-color所以我将其更改为$ hover over -color它现在似乎正常工作！

为什么它在https://www.sassmeister.com/中正常工作是有道理的，因为它不包括bootstrap 4变量。

Answer 2

你试过这个：

$header-color: yellow;
$link-color: purple;
$hover-color: white;

而不是这个

$color-yellow: yellow;
$color-red: purple;
$color-white: white;

$header-color: $color-yellow;
$link-color: $color-red;
$hover-color: $color-white;

Answer 3

我怀疑你正在使用的Sass版本正在解析文件，然后执行包含 - 它在初始解析期间检测到未定义的变量并在执行包含之前出错。

因此，请注意，尝试制作一个主scss文件。

style.scss

@import "_variables.scss";
@import "_styles.scss";
// No actual CSS in this file

_variables.scss

$color-red: purple;
$color-white: white;

$link-color: $color-red;
$hover-color: $color-white;

_styles.scss

a {
    color: $link-color;

    &:hover {
        color: $hover-color;
    }
}

GULP和SASS错误传递变量

3 个答案: