質問内容
gulp
CLI version: 2.2.0
Local version: 4.0.2
gulp-sass-glob v1.1.0 をinstallしたのですが、
partialファイルをまとめて呼び出すことができません。エディタはVScodeです。
下の画像の @import "setting/**" で、すでに下記のようなErrorが起きています。
不足の情報がありましたら、ご提供いたしますので、どうかご助力お願いいたします。
こちらのError文はVScodeのプラグインEasySassで出されたものです
Error
1Error: File "/.../root/sass/setting/**" not found 2 on line 1 of sass/.../root/sass/style.scss 3>> @import "setting/**"; 4 --------^
下記はgulpプロジェクトのファイル構成の概要(一部省略しています)です。
root |-css/ | |-style.css | |-js/ | |-/*jsのファイル群*/ | |-sass/ | |-base/ | |-mixin/ | |-module/ | |-page/ | |-setting/ | |-_s_color.scss | |-_s_form.scss | |-_s_size.scss | |-_s_typography.scss | |-style.scss | |-img/ | |-ejs/ | |-node_modules/ | |-/gulpなどのファイル群/ | |-package.json |-gulpfile.js |-package-lock.json
該当のソースコード
gulpfile.js
js
1// パッケージの読み込み 2var gulp = require( 'gulp' ); 3var sass = require( 'gulp-sass' ); 4var plumber = require( 'gulp-plumber' ); 5var notify = require( 'gulp-notify' ); 6var sassGlob = require( 'gulp-sass-glob' ); 7var mmq = require( 'gulp-merge-media-queries' ); 8var browserSync = require( 'browser-sync' ); 9 10var imagemin = require( 'gulp-imagemin' ); 11var imageminPngquant = require( 'imagemin-pngquant' ); 12var imageminMozjpeg = require( 'imagemin-mozjpeg' ); 13 14var postcss = require( 'gulp-postcss' ); 15var autoprefixer = require( 'autoprefixer' ); 16var cssdeclsort = require( 'css-declaration-sorter' ); 17 18var ejs = require( 'gulp-ejs' ); 19var rename = require( 'gulp-rename' ); 20var replace = require( 'gulp-replace' ); 21 22var imageminOption = [ 23 imageminPngquant({ quality: '65-80' }), 24 imageminMozjpeg({ quality: 85 }), 25 26 // gif画像 圧縮 27 imagemin.gifsicle({ 28 interlaced: false, 29 optimizationLevel: 1, 30 colors: 256 31 }), 32 imagemin.jpegtran(), 33 imagemin.optipng(), 34 imagemin.svgo() 35]; 36 37// sass-to-css 変換・出力処理 38gulp.task( 'sass', function() { 39 return gulp 40 .src('./sass/**/*.scss') 41 .pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') })) 42 .pipe(sassGlob()) 43 .pipe(sass({ outputStyle: 'expanded' })) 44 .pipe(postcss([autoprefixer()])) 45 .pipe(postcss([cssdeclsort({ order: 'alphabetically' })])) 46 .pipe(mmq()) 47 .pipe(gulp.dest('./css')); 48}); 49 50// watch 51gulp.task('watch', function() { 52 gulp.watch('./ejs/**/*.ejs', ['ejs']); 53 gulp.watch('./sass/**/*.scss', ['sass']); 54}); 55 56// ファイル保存時のブラウザ自動更新 57gulp.task('browser-sync', function() { 58 browserSync.init({ 59 server: { 60 baseDir: './', 61 index: 'index.html' 62 } 63 }); 64}); 65 66gulp.task('bs-reload', function() { 67 browserSync.reload(); 68}); 69 70gulp.task('default', ['browser-sync', 'watch'], function() { 71 gulp.watch('./*.html', ['bs-reload']); 72 gulp.watch('./css/*.css', ['bs-reload']); 73 gulp.watch('./js/*.js', ['bs-reload']); 74}); 75 76// 画像圧縮処理 77gulp.task('imagemin', function() { 78 return gulp 79 .src('./img/**/*') 80 .pipe(imagemin(imageminOption)) 81 .pipe(gulp.dest('./img')); 82}); 83 84 85gulp.task('ejs', function() { 86 return gulp 87 .src(['ejs/**/*.ejs', '!ejs/**/_*.ejs']) 88 .pipe(ejs({}, {}, { ext: '.html' })) 89 .pipe(rename({ extname: '.html' })) 90 .pipe(replace(/[\s\S]*?(<!DOCTYPE)/, '$1')) 91 .pipe(gulp.dest('./')); 92}); 93 94
package.json
json
1{ 2 "name": "package-template", 3 "version": "1.0.0", 4 "description": "template", 5 "main": "gulpfile.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1" 8 }, 9 "author": "...", 10 "license": "...", 11 "devDependencies": { 12 "autoprefixer": "^9.6.1", 13 "css-declaration-sorter": "^4.0.1", 14 "gulp": "^4.0.2", 15 "gulp-ejs": "^4.1.1", 16 "gulp-imagemin": "^6.0.0", 17 "gulp-merge-media-queries": "^0.2.1", 18 "gulp-notify": "^3.2.0", 19 "gulp-plumber": "^1.2.1", 20 "gulp-postcss": "^8.0.0", 21 "gulp-rename": "^1.4.0", 22 "gulp-replace": "^1.0.0", 23 "gulp-sass": "^4.0.2", 24 "gulp-sass-glob": "^1.1.0", 25 "gulp-stylelint": "^9.0.0", 26 "imagemin-mozjpeg": "^8.0.0", 27 "imagemin-pngquant": "^8.0.0", 28 "stylelint-config-wordpress": "^14.0.0" 29 } 30} 31
あなたの回答
tips
プレビュー