2016-02-19 64 views
1

因此,昨天它像魅力一樣工作,我回家了,今天早上上班,沒有工作。 我正在爲網站創建styleguide。我希望你們中的一些人能幫助我。 這裏是我的代碼我的sc5風格指南不再更新

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)); 
}); 

當我運行一飲而盡手錶和節省一些SCSS,我得到這個:

enter image description here

什麼是不確定的!?!我該如何解決它?發生在風格指南

編輯

問題:產生

回答

0

現在我已經得到了這個非常有用的錯誤消息的次數,以及。

大多數時候它彈出給我,當我給兩個塊相同的標識。例如,如果我有兩個部分,例如Styleguide 1.1,那麼Styleguide會在styleguide頁面標題中的一個大的紅色渲染部分中顯示錯誤。但是,如果我有像這樣的進一步嵌套的孩子相同的ID:Styleguide 1.1.3然後我看到的是一個undefined在控制檯和一個死的網頁,我可愛的styleguide曾經是。

當我試着用!全局後綴在SCSS中設置變量時,出現了另一個耗費我幾個小時的問題。當我偶然發現這篇文章時,我找到了修復:Advanced techniques for the SC5 styleguide generator。關鍵是在最後一段中,SC5排除和編譯器錯誤。這裏提到在忽略塊中添加有問題的代碼段。這在自述文件Ignore parts of the stylesheet from being processed下描述。

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

我自己並沒有看過SC5 Code,但是希望我的經驗可能會以某種方式幫助那些偶然發現這個問題的人。

對於什麼是值得的,總是特別小心以避免重複的ID和慷慨地使用// styleguide:ignore:start// styleguide:ignore:end圍繞'有問題的'代碼塊已爲我工作。

+0

在這裏發佈更多關於解決方案的信息會很有幫助。只是鏈接到幫助你的資源並不是很有幫助。這個答案是90%「我也有問題」和10%有用的鏈接。 –