質問編集履歴

2

タグ追加

2021/07/10 07:39

投稿

takopo
takopo

スコア484

test CHANGED
File without changes
test CHANGED
File without changes

1

問題が再現するコードを追記しました

2021/07/10 07:39

投稿

takopo
takopo

スコア484

test CHANGED
File without changes
test CHANGED
@@ -50,8 +50,6 @@
50
50
 
51
51
  ```
52
52
 
53
-
54
-
55
53
  これを`Dart Sass`で作成したところ、なぜかコメントが一番下に集まってしまいます。
56
54
 
57
55
  ```scss
@@ -102,8 +100,6 @@
102
100
 
103
101
  ```
104
102
 
105
-
106
-
107
103
  なぜ一体このようになるのでしょうか…
108
104
 
109
105
  [公式サイト](https://sass-lang.com/dart-sass)をみてもコメント位置については特に何も書かれていないようでした。
@@ -112,8 +108,6 @@
112
108
 
113
109
  一応今応急処置的に、見出しコメントだけのscssファイルを作って以下のようにしているのですが、こんなことは絶対やりたくないので、何とか解決する方法を探しています。
114
110
 
115
-
116
-
117
111
  ```scss
118
112
 
119
113
  // Foundation ← こっちは表示させないようにする
@@ -160,8 +154,6 @@
160
154
 
161
155
  ```
162
156
 
163
-
164
-
165
157
  ```css
166
158
 
167
159
  /* Foundation */
@@ -186,8 +178,88 @@
186
178
 
187
179
  ```
188
180
 
189
-
190
-
191
181
  もし同じような問題を解決された方がいらっしゃいましたら、アドバイスいただけると大変助かります。
192
182
 
193
183
  よろしくお願いいたします。
184
+
185
+
186
+
187
+ ### 追記
188
+
189
+ Lhankor_Mhy様より他の環境では再現されないとの情報をいただきました。
190
+
191
+ そのためもしかしたらgulpのプラグインが原因じゃないかなと考えております。
192
+
193
+ 問題が再現する簡単なgulpfileを作りましたので追記させていただきます。
194
+
195
+
196
+
197
+ ```gulpfile
198
+
199
+ const gulp = require('gulp');
200
+
201
+ const sass = require('gulp-sass')(require('sass'));
202
+
203
+
204
+
205
+ gulp.task('sass', () => {
206
+
207
+ return gulp.src('./sass/**/*.scss')
208
+
209
+ .pipe(sass())
210
+
211
+ .pipe(gulp.dest('./css'));
212
+
213
+ });
214
+
215
+ ```
216
+
217
+ ディレクトリ構成
218
+
219
+ ```
220
+
221
+ sass/
222
+
223
+ ├ style.scss
224
+
225
+ └ _hoge.scss
226
+
227
+ ```
228
+
229
+ style.scss
230
+
231
+ ```scss
232
+
233
+ /* Layout */
234
+
235
+ @use "hoge";
236
+
237
+ ```
238
+
239
+ _hoge.scss
240
+
241
+ ```scss
242
+
243
+ .hoge {
244
+
245
+ color: red;
246
+
247
+ }
248
+
249
+ ```
250
+
251
+ 下記でインストールしてから
252
+
253
+ ```
254
+
255
+ npm install --save-dev gulp sass gulp-sass
256
+
257
+ ```
258
+
259
+ 下記で実行します
260
+
261
+ ```
262
+
263
+ npx gulp sass
264
+
265
+ ```