Gulp + Shopify Theme Kit для Sass с цветными функциями - PullRequest
Новая
       88

Gulp + Shopify Theme Kit для Sass с цветными функциями

1 голос
/ 28 апреля 2020

У меня довольно неприятная проблема. Я использую последнюю версию Theme Kit от Shopify, которая не позволяет размещать подпапки внутри папки ресурсов. Поэтому по этой причине мне пришлось поместить файлы SASS в другую папку со всей ее структурой, установить задачу Gulp, чтобы перевести ее в один файл в папке активов.

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

Мой gulpfile. js выглядит так: 

var gulp = require('gulp');
var sass = require('gulp-sass');
var replace = require('gulp-replace');
var autoprefixer = require('gulp-autoprefixer');
var rename = require('gulp-rename');

gulp.task('sass', function() {
    return gulp.src('./styles/theme.scss')
        .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
        .pipe(autoprefixer())
        .pipe(rename('theme.scss.liquid'))
        .pipe(replace('"{{', '{{'))
        .pipe(replace('}}"', '}}'))
        .pipe(gulp.dest('./assets/'));
});

gulp.task('default', function() {

    return gulp.watch(['./styles/**/*.scss'], gulp.series('sass'));
});

И я получаю сообщение об ошибке: 

Message:
    styles/partials/_general.scss
Error: argument `$color` of `lighten($color, $amount)` must be a color
        on line 71 of styles/partials/_general.scss, in function `lighten`
        from line 71 of styles/partials/_general.scss
        from line 12 of styles/theme.scss
>>          color: lighten($textColor, 20%);

   ----------^

У кого-то есть идеи, как это решить? Кажется, я больше не могу использовать цветовые функции SASS! Потому что, если затем я удалю данную строку в сообщении об ошибке, все идет хорошо!

...