前提・実現したいこと
転職活動のため、ポートフォリオとして簡単な画像投稿サイトを作ろうとしています。
Sassで記述して、gulpでコンパイルを自動化させるところまではできたのですが、
試しに_base.scssを書いてstyle.scssにインポートしてコンパイルしてみたところ出力されたcssが一行になってしまいます。
gulpfile.jsでoutputStyleをexpandedに設定しているのですが、
なぜこうなるのか原因がわかりません。
発生している問題・エラーメッセージ
css
1//コンパイルされたstyle.css 2@charset "UTF-8";html{font-size:100%}html body{font-family:"Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体","ヒラギノ角ゴ Pro W3",sans-serif;line-height:1.5;color:#222}html body a{text-decoration:none}html body img{max-width:100%}
該当のソースコード
scss
1//style.scss 2@import "foundation/base";
scss
1//foundation/_base.scss 2html { 3 font-size: 100%; 4 body { 5 font-family: "Yu Gothic Medium", "游ゴシック Medium", "YuGothic", "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif; 6 line-height: 1.5; 7 color: #222; 8 a { 9 text-decoration: none; 10 } 11 img { 12 max-width: 100%; 13 } 14 } 15} 16
js
1//gulpfile.js 2const gulp = require("gulp"); 3const sass = require("gulp-sass"); 4const plumber = require('gulp-plumber'); 5const pug = require("gulp-pug"); 6const autoprefixer =require('gulp-autoprefixer'); 7const cssmin = require('gulp-cssmin'); 8const uglify = require('gulp-uglify'); 9const browserSync = require('browser-sync'); 10const notify = require('gulp-notify'); 11 12 13const paths = { 14 src: 'src', 15 dest: 'dest' 16}; 17 18//Sass 19gulp.task('sass', function () { 20 return gulp.src([ 21 paths.src + '/scss/**/*.scss', 22 '!' + 'paths.src' +'/scss/**/_*.scss' 23 ]) 24 .pipe(sass({ 25 outputStyle: 'expanded' 26 })) 27 .pipe(plumber({ 28 errorHandler: notify.onError("Error: <%= error.message %>") 29 })) 30 .pipe(autoprefixer({ 31 overrideBrowserslist: 'last 2 versions' 32 })) 33 .pipe(cssmin()) 34 .pipe(gulp.dest(paths.dest + '/css')) 35 }); 36 37//Pug 38gulp.task('pug', function () { 39 return gulp.src([ 40 paths.src + '/pug/**/*.pug', 41 '!' + 'paths.src' + '/pug/**/_*.pug' 42 ]) 43 .pipe(plumber({ 44 errorHandler: notify.onError("Error: <%= error.message %>") 45 })) 46 .pipe(pug({pretty: true})) 47 .pipe(gulp.dest(paths.dest)) 48 }); 49 50//JS Compress 51gulp.task('js', function () { 52 return gulp.src( 53 paths.src + '/js/**/*' 54 ) 55 .pipe(plumber()) 56 .pipe(uglify()) 57 .pipe(gulp.dest(paths.dest + '/js')) 58 }); 59 60//Image File 61gulp.task('image', () => { 62 return gulp.src( 63 paths.src + '/img/**/*' 64 ) 65 .pipe(gulp.dest(paths.dest + '/img')) 66}); 67 68// browser-sync 69gulp.task('browser-sync', function(done) { 70 browserSync({ 71 server: { 72 baseDir: paths.dest 73 }}); 74 done(); 75}); 76 77//watch 78gulp.task('watch', function() { 79 const reload = () => { 80 browserSync.reload(); 81 }; 82 gulp.watch([paths.src + '/scss/**/*']).on('change', gulp.series('sass', reload)); 83 gulp.watch([paths.src + '/js/**/*']).on('change', gulp.series('js', reload)); 84 gulp.watch([paths.src + '/pug/**/*']).on('change', gulp.series('pug', reload)); 85 gulp.watch([paths.src + '/img/**/*']).on('change', gulp.series('image', reload)); 86}); 87 88gulp.task('default', gulp.series(gulp.parallel('sass','pug','js','image','watch','browser-sync'))); 89
ディレクトリ構成
試したこと
同じようなエラー情報や対策法がないか日本語と英語とで検索していますが、見つかりません。
コンパイルはできているようなので、何度かCSSを削除して、コンパイルしなおしてみましたが
改善されませんでした。
補足情報(FW/ツールのバージョンなど)
テキストエディタ: Atom
Gulp Version: Local version: 4.0.2
回答1件
あなたの回答
tips
プレビュー