Переменная передачи ошибок GULP и SASS - PullRequest
Новая
       4

Переменная передачи ошибок GULP и SASS

0 голосов
/ 08 мая 2018

У меня есть каталог, обработанный GULP, на котором выполняются эти файлы SCSS, но он продолжает выдавать ошибку при запуске GULP

Ошибка: неопределенная переменная: "$ hover-color". в строке 18 src / scss / styles.scss 

  color:$hover-color;

Но когда я запускаю его в SassMeister, кажется, он работает нормально!

Если кто-то может помочь ...

Код находится на git: https://gist.github.com/cwjones73/c5268f3bb40654a43696a50b33592cce

для тех, кто не может получить доступ к git, я добавил:

gulpfile.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 / СКС / 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 / СКС / _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;

index.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>

Ответы [ 3 ]

0 голосов
/ 08 мая 2018

У меня есть подозрение, что используемая вами версия Sass выполняет синтаксический анализ файла, затем выполняет include - он обнаруживает неопределенную переменную во время первоначального анализа и выдает ошибку перед выполнением include.

Итак, на этой заметке попробуйте создать основной файл 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;
    }
}
0 голосов
/ 08 мая 2018

Спасибо за вашу помощь. Я уверен, что эти обнаруженные ошибки пригодятся в будущих проектах, хотя я решил проблему.

Я запускаю bootstrap 4, и в нем, похоже, уже есть переменная: $ hover-color, поэтому я изменил ее на $ hover over -color, и теперь она вроде бы работает нормально!

Имеет смысл, почему он работал нормально в https://www.sassmeister.com/, поскольку он не включал бы переменные начальной загрузки 4.

0 голосов
/ 08 мая 2018

Вы пробовали это: 

$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;
...