スタイルガイドジェネレーター sc5-styleguide 画面崩れを直したい
解決済
回答 1
投稿
- 評価
- クリップ 1
- VIEW 1,301
前提・実現したいこと
スタイルガイドジェネレーター sc5-styleguide 画面崩れを直したい。
■正常な画面
http://demo.styleguide.sc5.io/
発生している問題・エラーメッセージ
CSSが効いていないのか、フッターやナビゲーションなどが崩れています。
「package.json」「gulpfile.js」を記載いたします。
](a3df8e7803da7a8c15c79644ef147ab1.jpeg)
package.json
{
"name": "startkit-dev",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.18.13",
"gulp": "^3.9.1",
"gulp-ejs": "^3.0.1",
"gulp-plumber": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.1.0",
"gulp-sourcemaps": "^2.6.1",
"sc5-styleguide": "^2.0.4"
}
}
gulpfile.js
var browserSync =require('browser-sync');
var gulp = require('gulp');
var ejs = require('gulp-ejs');
var plumber = require('gulp-plumber');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var styleguide = require('sc5-styleguide');
// ブラウザ更新
gulp.task('browser-sync', () => {
return browserSync.init(null, {
server: './release/'
});
});
gulp.task('bs-reload', function () {
browserSync.reload();
});
//EJS(テンプレートエンジン)
gulp.task('ejs', function() {
gulp.src(
['./develop/**/*.ejs','!' + './develop/**/_*.ejs'] //参照するディレクトリ、出力を除外するファイル
)
.pipe(ejs())
.pipe(rename({extname: '.html'})) //拡張子をhtmlに
.pipe(gulp.dest('./release/')) //出力先
});
// Sassコンパイルタスク
gulp.task('sass', function(){
gulp.src('./develop/assets/sass/**/*.scss') // どのフォルダのsassを参照するのか設定
.pipe(sourcemaps.init())
.pipe(plumber())
.pipe(sass())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./release/assets/css/')) // コンパイルしたcssの出力先を設定
});
// スタイルガイド
var guidePath = 'guide';
gulp.task('styleguide:generate', function() {
return gulp.src('./develop/**/*.scss')
.pipe(styleguide.generate({
title: 'スタイルガイド',
server: true,
port: 4000,
rootPath: guidePath,
sideNav: true,
overviewPath: './guide/README.md'
}))
.pipe(gulp.dest(guidePath));
});
gulp.task('styleguide:applystyles', function() {
return gulp.src('./develop/**/*.scss')
.pipe(sass({
errLogToConsole: true
}))
.pipe(styleguide.applyStyles())
.pipe(gulp.dest(guidePath));
});
gulp.task('styleguide', ['styleguide:generate', 'styleguide:applystyles']);
// watchタスク
gulp.task('sass-watch', ['sass'], function(){
gulp.watch('./develop/**/*.ejs', ['ejs']);
gulp.watch('./develop/**/*.scss', ['sass']);
gulp.watch('./release/**/*.html', ['bs-reload']);
gulp.watch('./release/**/*.css', ['bs-reload']);
gulp.watch('./develop/**/*.scss', ['styleguide']);
});
// gulpのデフォルト動作
gulp.task('default', ['sass-watch', 'browser-sync', 'ejs', 'styleguide']);
補足情報(言語/FW/ツール等のバージョンなど)
node v6.11.0
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+1
原因まではわかりませんが、自分の環境では、sc5-styleguide をダウングレードすることで表示崩れが解決しました。
- package.json
"sc5-styleguide": "^2.0.4"
↓
"sc5-styleguide": "1.0.0"
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.33%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2017/09/05 13:11
回答ありがとうございます。
ダウングレードして無事期待通りの表示になりました。
バージョンも色々試して、「1.8.0」のバージョンに落ち着きました。
ありがとうございました。