Question

所以昨天它的工作就像一个魅力，我回家了，今天早上上班，它没有工作。我正在为网站创建一个样式指南。我希望你们中的一些人可以帮助我。这是我的代码

gulpfile.js

var paths = {
    styles: 'assets/scss/source/**/*.scss',
    cssDest: 'frontend/css',
    styleguide: 'styleguide'
};

gulp.task('watch', function() {
    gulp.watch(paths.styles, ['styles', 'styleguide']);
});

gulp.task('styles', function() {
    return gulp.src(paths.styles)
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(gulp.dest(paths.cssDest))
        .pipe(concat('all.min.css'))
        .pipe(cssnano())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(paths.cssDest))
        .pipe(livereload());
});

gulp.task('styleguide:generate', function() {
    return gulp.src(paths.styles)
        .pipe(styleguide.generate({
            title: 'My Styleguide',
            rootPath: paths.styleguide,
            appRoot: '/styleguide',
            overviewPath: 'README.md',
            server : false,
            disableEncapsulation: true,
            styleVariables: 'assets/scss/_variables.scss',
            extraHead: [
                '<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>',
                '<script src="/frontend/js/bootstrap.min.js"></script>',
                '<script type="text/javascript" src="/frontend/js/lib.min.js"></script>',
                '<script type="text/javascript" src="/frontend/js/all.min.js"></script>'
            ],
    }))
    .pipe(gulp.dest(paths.styleguide));
});

gulp.task('styleguide:applystyles', ['styles'], function() {
  return gulp.src([
        "frontend/css/bootstrap.min.css",
        "frontend/css/main.css"
    ])
    .pipe(styleguide.applyStyles())
    .pipe(gulp.dest(paths.styleguide));
});

当我运行gulp watch并保存一些scss时，我明白了：

什么是未定义的！？！我该如何解决？

修改

问题发生在styleguide：generate

Answer 1

我现在已经多次获得这个非常有用的错误消息。

当我给两块相同的标识时，大部分时间都会弹出它。例如，如果我有 Styleguide 1.1 的两个部分，则样式指南会在样式指南本身的页眉中显示一个大的红色渲染部分中的错误。但是，如果我进一步嵌套具有相同ID的子项： Styleguide 1.1.3 ，那么我所看到的只是控制台中的 undefined 和我可爱的样式指南的死网页曾经是。

当我尝试使用！global后缀在SCSS中设置变量时，出现了另一个耗费我几个小时的问题。我偶然发现了这篇文章：Advanced techniques for the SC5 styleguide generator。关键是最后一段中的一段， SC5排除和编译器错误。这里提到在忽略块中添加有问题的代码段。这在Ignore parts of the stylesheet from being processed下的自述文件中有所描述。

我目前正在使用sc5-styleguide版本0.3.44和gulp 3.9.1。

我自己没有查看SC5代码，但希望我的经验可以在某种程度上帮助那些偶然发现这个问题的人。

对于它的价值，始终特别小心避免重复的ID并且慷慨地使用// styleguide:ignore:start和// styleguide:ignore:end围绕“有问题的”代码块对我有用。

我的sc5风格指南不再更新

1 个答案: