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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Sass

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

gulp

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

Q&A

0回答

324閲覧

gulp-sass-globでpartialファイルをまとめて@importできない

ironman

総合スコア20

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Sass

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

gulp

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

0グッド

0クリップ

投稿2019/07/12 07:47

編集2022/01/12 10:55

質問内容

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

root/sass/style.scss
イメージ説明

下記は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

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

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

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

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

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

m.ts10806

2019/07/12 13:29

回答依頼いただきましたがgulpは全く分からないので ご期待にそえることは難しそうです。すみません。
ironman

2019/07/12 13:36

いえいえ、ご丁寧にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問