Question

我无法尝试从susy 2显示调试网格。

基于此样本：

我用

body
{
 @include container(show);

}

但开发者工具返回的是：

https://www.dropbox.com/s/pskhjvwd631jux6/Screenshot%202014-08-24%2015.31.37.png?dl=0

SVG网格不存在

我开始考虑我的gulp配置：

    // Include gulp
var gulp   = require('gulp'),

// Include Our Plugins
sass       = require('gulp-ruby-sass'),
compass    = require('gulp-compass'),
prefix     = require('gulp-autoprefixer'),
minifycss  = require('gulp-minify-css'),
jshint     = require('gulp-jshint'),
uglify     = require('gulp-uglify'),
imagemin   = require('gulp-imagemin'),
rename     = require('gulp-rename'),
rimraf     = require('gulp-rimraf'),
concat     = require('gulp-concat'),
notify     = require('gulp-notify'),
cache      = require('gulp-cache'),
plumber    = require('gulp-plumber');
livereload = require('gulp-livereload');

//Sass
gulp.task('styles', function() {
  return gulp.src('_scss/*.scss')
  .pipe(plumber())
  .pipe(compass({
        // Compass settings that would otherwise go in config.rb
        sass: '_scss',
        css: 'resources/css',
        image: 'resources/img',
        //environment: 'production',
        //environment: 'development',
        style: 'expanded',
        relative: true,
        //noLineComments: true
        require: ['susy', 'breakpoint']
      }))
  .pipe(prefix({ cascade: true }))
  .pipe(gulp.dest('resources/css'))
  .pipe(rename({suffix: '.min'}))
  .pipe(minifycss())
  .pipe(gulp.dest('resources/css'))
  .pipe(notify({ message: 'Styles task complete' }));
});

// Concatenate & Minify JS
gulp.task('pluginsjs', function() {
  return gulp.src(['_coffeescript/_plugins.js'])
  .pipe(plumber())
  .pipe(gulp.dest('resources/js'))
  .pipe(rename({basename:'plugins', suffix: '.min'}))
  .pipe(gulp.dest('resources/js'))
  .pipe(notify({ message: 'Plugins javascript task complete' }));
});

gulp.task('mainjs', function() {
  return gulp.src(['_coffeescript/_main.js'])
  .pipe(jshint())
  .pipe(jshint.reporter('default'))
  .pipe(plumber())
  .pipe(gulp.dest('resources/js'))
  .pipe(rename({basename:'main',suffix: '.min'}))
  .pipe(uglify())
  .pipe(gulp.dest('resources/js'))
  .pipe(notify({ message: 'Main javascript task complete' }));
});

// Optimize Images
gulp.task('images', function() {
  return gulp.src('_img/**')
  .pipe(plumber())
  .pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
  .pipe(gulp.dest('resources/img'))
  .pipe(notify({ message: 'Images task complete' }));
});

//Clean everything
gulp.task('rimraf', function() {
  return gulp.src(['resources/css', 'resources/js', 'resources/img'], {read: false})
  .pipe(rimraf());
});

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

  // Watch .scss files
  gulp.watch('_scss/*.scss', ['styles']);

  // Watch .js files
  gulp.watch('_coffeescript/*.js', ['pluginsjs','mainjs']);

  // Watch image files
  gulp.watch('_img/**', ['images']);


  //Create LiveReload server
  var server = livereload();

  //Watch any files in dist/, reload on change
  gulp.watch(['dist + /**']).on('change', function(file) {
   server.changed(file.path);
 });

});

gulp.task('default', ['rimraf'], function() {
  gulp.start(['styles', 'pluginsjs', 'mainjs', 'images', 'watch']);
});

但是我对demin imagemin或任何可能存在影响的东西都是一样的，并且总是...... :(

它可能是什么？

感谢

Answer 1

看起来你有另一张图片覆盖了Susy背景。尝试使用overlay选项：

body
{
  @include container(show overlay);
}

Susy 2 Show-Grid背景图像未找到

1 个答案: