質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

Q&A

解決済

1回答

1999閲覧

スタイルガイドジェネレーター sc5-styleguide 画面崩れを直したい

ArimaTetsuya

総合スコア12

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

0グッド

1クリップ

投稿2017/08/31 07:54

###前提・実現したいこと
スタイルガイドジェネレーター sc5-styleguide 画面崩れを直したい。
■正常な画面
http://demo.styleguide.sc5.io/

###発生している問題・エラーメッセージ
CSSが効いていないのか、フッターやナビゲーションなどが崩れています。
「package.json」「gulpfile.js」を記載いたします。

イメージ説明

###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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

原因まではわかりませんが、自分の環境では、sc5-styleguide をダウングレードすることで表示崩れが解決しました。

  • package.json

"sc5-styleguide": "^2.0.4"

"sc5-styleguide": "1.0.0"

投稿2017/09/02 03:13

t.ganaha

総合スコア15

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ArimaTetsuya

2017/09/05 04:11

t.ganaha さん 回答ありがとうございます。 ダウングレードして無事期待通りの表示になりました。 バージョンも色々試して、「1.8.0」のバージョンに落ち着きました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問