sass - 用于 Sass 的 Gulp + Shopify 主题套件，具有颜色功能

Question

我有一个很烦人的问题。我正在使用 Shopify 主题工具包的最新版本，它不允许将子文件夹放置在 assets 文件夹中。因此，出于这个原因，我不得不将我的 SASS 文件放入另一个具有所有结构的文件夹中，设置一个 Gulp 任务将其转换为 assets 文件夹中的单个文件。

但我仍然想使用用户可以在 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 颜色功能了！因为如果我删除错误消息中的给定行，一切正常！

标签： sassgulpshopifygulp-sassshopify-template