我有一个运行这些 SCSS 文件的 GULP 处理目录，但是当我运行 GULP 时它不断抛出错误
错误：未定义的变量："$hover色"。 在 src/scss/styles.scss 的第 18 行
color:$hover-color;
但是当我在 SassMeister 中运行它时，它似乎工作正常！
如果有人能帮忙...
代码位于 git： https://gist.github.com/cwjones73/c5268f3bb40654a43696a50b33592cce
对于那些无法访问 git 的人，我添加了以下内容：
古尔普文件.js
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/style.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;
}
}
/src/scss/_variables.scss
$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;
索引.html
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>Bootstrap 4 Layout</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800">
<link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container gradient">
<h1>This H1 text</h2>
<h2><a href="#">This is h2 text</a> </h2>
</div>
<script src="/js/jquery.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
</html>
感谢您的所有帮助。我相信这些错误检测将在未来的项目中派上用场，尽管我已经解决了这个问题。
我正在运行 bootstrap 4，它似乎已经有变量：$hover色，所以我将其更改为$hover色，现在似乎工作正常！
为什么它在 https://www.sassmeister.com/中工作正常是有道理的，因为它不会包含引导 4 变量。
你试过这个吗：
$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;
我怀疑您正在使用的 Sass 版本正在解析文件，然后执行包含 - 它在初始解析期间检测未定义的变量并在执行包含之前出错。
因此，在这一点上，请尝试制作一个主 scss 文件。
风格.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;
}
}