前提・実現したいこと
gulpでsassのコンパイルとディレクトリ毎に全ファイルをインポートしたい
発生している問題・エラーメッセージ
gulpが動いている様子がないです。プラグインはインストールできていると思います。
package.json
{
"name": "tf-cordhing",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"gulp-plumber": "^1.2.1",
"gulp-progeny": "^0.4.1",
"gulp-sourcemaps": "^2.6.5",
"gulp-autoprefixer": "^7.0.1",
"gulp-sass": "^4.0.2"
},
"devDependencies": {
"gulp": "^4.0.2",
"gulp-sass-glob": "^1.1.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
これらを実行しても動きません。
style.scss
@import "./foundation/**";
@import "./layout/**";
Error: File "/Users/karin2/Desktop/TF cordhing/scss/foundation/**" not found
on line 1 of sass/Users/○○/Desktop/cordhing/scss/style.scss
>> @import "./foundation/**";
--------^
gulpfile.js
var gulp = require( 'gulp' ); // 1
var sass = require( 'gulp-sass' ); // 1
var autoprefixer = require( 'gulp-autoprefixer' ); // 1
var plumber = require( 'gulp-plumber' ); // 1
var sourcemaps = require( 'gulp-sourcemaps' ); // 1
var sassGlob = require('gulp-sass-glob');
// Sass
gulp.task( 'sass', function(){ // 2
return gulp.src( './sass/**/*.scss' ) // 3
.pipe( plumber() ) // 4
.pipe( progeny() ) // 4
.pipe( sourcemaps.init() ) // 5
.pipe( sass( { // 6
outputStyle: 'expanded'
} ) )
.pipe( autoprefixer( { // 7
browsers: ['last 2 version', 'iOS >= 8.1', 'Android >= 4.4'],
cascade: false
} ) )
.pipe( sourcemaps.write() ) // 5
.pipe( gulp.dest( 'css')) // 8
.pipe(sassGlob())
} );
試したこと
ファイル構造はこのような形です。node_modulesディレクトリはフォルダがあまりに多いので省略しています。ちなみに、foundationのcolor.scssファイルに試しにかくと、color.min.cssが生成されてしまいました。
.
├── css
│ ├── style.css
│ └── style.min.css
├── gulpfile.js
├── index.html
├── js
│ └── main.js
├── package-lock.json
├── package.json
└── sass
├── foundation
│ ├── _color.css
│ ├── _color.min.css
│ ├── _color.scss
│ ├── _mixin.scss
│ └── _reset.scss
├── layout
│ ├── _footer.scss
│ ├── _header.scss
│ ├── _main.scss
│ ├── _nav.scss
│ └── _topmain.scss
└── style.scss
5 directories, 18 files
どうぞ、よろしくお願いいたします。
補足情報（FW/ツールのバージョンなど）
Macを使っています。
ここにより詳細な情報を記載してください。
Q&A
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/04 06:32
2020/03/04 06:43