回答編集履歴

1

回答ミスのため、修正

2020/03/02 15:57

投稿

jackmiwamiwa
jackmiwamiwa

スコア395

test CHANGED
@@ -1 +1,91 @@
1
- scssで`@import "./foundation/**"`のような記述を行いたい場合、gulp-sass-globなどをインストールする必要がありますので、そのエラーだと思います。詳しい使い方については[https://qiita.com/tonkotsuboy_com/items/67d9fd4d054a45af9f34](https://qiita.com/tonkotsuboy_com/items/67d9fd4d054a45af9f34)を参考にしてください。
1
+ 現状
2
+
3
+ ```js
4
+
5
+ gulp.task( 'sass', function(){ // 2
6
+
7
+ return gulp.src( './sass/**/*.scss' ) // 3
8
+
9
+ .pipe( plumber() ) // 4
10
+
11
+ .pipe( progeny() ) // 4
12
+
13
+ .pipe( sourcemaps.init() ) // 5
14
+
15
+ .pipe( sass( { // 6
16
+
17
+ outputStyle: 'expanded'
18
+
19
+ } ) )
20
+
21
+ .pipe( autoprefixer( { // 7
22
+
23
+ browsers: ['last 2 version', 'iOS >= 8.1', 'Android >= 4.4'],
24
+
25
+ cascade: false
26
+
27
+ } ) )
28
+
29
+ .pipe( sourcemaps.write() ) // 5
30
+
31
+ .pipe( gulp.dest( 'css')) // 8
32
+
33
+ .pipe(sassGlob())
34
+
35
+
36
+
37
+ } );
38
+
39
+ ```
40
+
41
+ の部分の
42
+
43
+ ```
44
+
45
+ .pipe( gulp.dest( 'css')) // cssの書き出し
46
+
47
+ .pipe(sassGlob()) // sassGlobの実行
48
+
49
+ ```
50
+
51
+ の順序になっているため、エラーになります。
52
+
53
+ ```js
54
+
55
+ gulp.task("default", function() {
56
+
57
+ return gulp.src("sass/style.scss")
58
+
59
+ .pipe(sassGlob()) // Sassの@importにおけるglobを有効にする
60
+
61
+ .pipe(sass())
62
+
63
+ .pipe(gulp.dest("css"));
64
+
65
+ });
66
+
67
+ ```
68
+
69
+ のような感じで
70
+
71
+ ```js
72
+
73
+ gulp.task("default", function() {
74
+
75
+ return gulp.src("sass/style.scss")
76
+
77
+ .pipe(sassGlob()) // glob
78
+
79
+ .pipe(sass()) // scssの処理
80
+
81
+ .pipe(gulp.dest("css")); //cssの書き出し
82
+
83
+ });
84
+
85
+ ```
86
+
87
+ のように実行すればscssファイルがコンパイルされます。
88
+
89
+
90
+
91
+ 具体的な使い方については[https://qiita.com/tonkotsuboy_com/items/67d9fd4d054a45af9f34](https://qiita.com/tonkotsuboy_com/items/67d9fd4d054a45af9f34)に記載してあります。