Компиляция SASS работает, но Gulp нет - PullRequest
Новая
       4

Компиляция SASS работает, но Gulp нет

1 голос
/ 14 января 2020

Я только начинаю с Gulp, но не могу заставить его работать. Когда я просто запускаю обычную команду sass, все прекрасно компилируется.

Вот мой файл Gulp: 

//Gulp Dependencies
var gulp = require("gulp");
var log = require("fancy-log");

//Style Dependencies
var sourcemaps = require("gulp-sourcemaps");
var scss = require("gulp-sass");
var autoprefixer = require("gulp-autoprefixer");
var cssnano = require("gulp-cssnano");

function scssTask() {
    return gulp.src(["../css/partial/*.scss",
        "../css/*.scss","])
        .pipe(sourcemaps.init())
        .on("end", function(){ 
            log("Sourcemap Complete...");
        })
        .pipe(scss())
        .on("end", function(){ 
            log("SASS Compiled...");
        })
        .pipe(autoprefixer())
        .on("end", function(){ 
            log("Autoprefixer Done...");
        })
        .pipe(cssnano())
        .on("end", function(){ 
            log("CSS Minified...");
        })
        .pipe(gulp.dest("../../dist/css")
        )
        .on("end", function(){ 
            log("SCSS Task Complete!");
        });
}

exports.default = gulp.series(scssTask);

При запуске я получаю следующую ошибку: 

[05:12:57] Using gulpfile /path/to/gulpfile
[05:12:57] Starting 'default'...
[05:12:57] Starting 'scssTask'...
[05:12:57] 'scssTask' errored after 26 ms
[05:12:57] Error in plugin "gulp-sass"
Message:
    ../css/coming-soon.scss
Error: no mixin named background
        on line 4 of ../css/coming-soon.scss
>>   @include background($images + "blurground.jpg");
   -----------^

Details:
    status: 1
    file: /var/www/pickle.codes/src/css/coming-soon.scss
    line: 4
    column: 12
    formatted: Error: no mixin named background
        on line 4 of ../css/coming-soon.scss
>>   @include background($images + "blurground.jpg");
   -----------^

    messageFormatted: ../css/coming-soon.scss
Error: no mixin named background
        on line 4 of ../css/coming-soon.scss
>>   @include background($images + "blurground.jpg");
   -----------^

    messageOriginal: no mixin named background
    relativePath: ../css/coming-soon.scss
    domainEmitter: [object Object]
    domainThrown: false

Вот соответствующая часть предстоящего скоро. * css

@use "partial/base.scss" as *;

html {
  @include background($images + "image.jpg");
}
...

, а вот соответствующая часть _base.s css

$images: "/static/images/" !default;

@mixin background($background-image-path) {
  background: url($background-image-path) center center fixed;
}

Другие люди у которых была похожая проблема, говорят, что они не назвали свой частичный файл s css с помощью символа "_", однако это не мой случай, поскольку у "_base.s css" - на самом деле - есть подчеркивание. Моя следующая мысль состояла в том, что, поскольку работала обычная команда sass, это должно быть потому, что Gulp не компилировал _bass.s css до наступления скоро в ближайшее время css, поэтому я переместил _base.s css в свою собственную папку и поместите эту новую "частичную" папку первым в массиве. Но это, похоже, не помогло.

Заранее спасибо, и извините, если это закончится тем, что я просто выдумал точку с запятой или что-то в этом роде: P

1 Ответ

1 голос
/ 14 января 2020

Ваш _base.scss файл импортирован в ваш main.scss файл? Глоток не может найти твой миксин. Чтобы убедиться, что ваши частичные файлы импортированы в правильном порядке, я бы рекомендовал использовать файл main.scss и просмотреть его.

Для великолепной модели Sass, основанной на шаблоне архитектуры 7-1: https://github.com/HugoGiraudel/sass-boilerplate

В частности, файл main.scss: https://github.com/HugoGiraudel/sass-boilerplate/blob/master/stylesheets/main.scss

...