最近LibSass
からDart Sass
に変更したのですが、コメント表示についておかしな不具合?のようなものがあり質問させていただきました。
以前までの@import
で読み込む形でしたら以下のようにコメントを書くことができました。
scss
1/* Foundation */ 2@import 'foundation/base'; 3 4/* Layout */ 5@import 'layout/header'; 6@import 'layout/footer'; 7 8/* Component */ 9@import 'component/btn';
コンパイルすると以下のようになり、コメントは適切な位置に表示されます。
css
1/* Foundation */ 2html {} 3body {} 4 5/* Layout */ 6.header {} 7.footer {} 8 9/* Component */ 10.btn {}
これをDart Sass
で作成したところ、なぜかコメントが一番下に集まってしまいます。
scss
1/* Foundation */ 2@use 'foundation/base'; 3 4/* Layout */ 5@use 'layout/header'; 6@use 'layout/footer'; 7 8/* Component */ 9@use 'component/btn';
css
1html {} 2body {} 3 4.header {} 5.footer {} 6 7.btn {} 8↓ 一番下にコメントが移動してしまう 9/* Foundation */ 10/* Layout */ 11/* Component */
なぜ一体このようになるのでしょうか…
公式サイトをみてもコメント位置については特に何も書かれていないようでした。
個人制作のプロジェクトでしたらminify化してコメントを全部削除するのですが、クライアントワークの場合minify化せずにコメントをきちんとつけてほしいと言われることがあるので、どうすればいいか困っております。
一応今応急処置的に、見出しコメントだけのscssファイルを作って以下のようにしているのですが、こんなことは絶対やりたくないので、何とか解決する方法を探しています。
scss
1// Foundation ← こっちは表示させないようにする 2@use "foundation/f-comment"; // 見出しコメント用 3@use 'foundation/base'; 4 5// Layout 6@use "layout/l-comment"; // 見出しコメント用 7@use 'layout/header'; 8@use 'layout/footer'; 9 10// Component 11@use "component/c-comment"; // 見出しコメント用 12@use 'component/btn';
scss
1/* Foundation */
scss
1/* Layout */
scss
1/* Component */
css
1/* Foundation */ 2html {} 3body {} 4 5/* Layout */ 6.header {} 7.footer {} 8 9/* Component */ 10.btn {}
もし同じような問題を解決された方がいらっしゃいましたら、アドバイスいただけると大変助かります。
よろしくお願いいたします。
追記
Lhankor_Mhy様より他の環境では再現されないとの情報をいただきました。
そのためもしかしたらgulpのプラグインが原因じゃないかなと考えております。
問題が再現する簡単なgulpfileを作りましたので追記させていただきます。
gulpfile
1const gulp = require('gulp'); 2const sass = require('gulp-sass')(require('sass')); 3 4gulp.task('sass', () => { 5 return gulp.src('./sass/**/*.scss') 6 .pipe(sass()) 7 .pipe(gulp.dest('./css')); 8});
ディレクトリ構成
sass/ ├ style.scss └ _hoge.scss
style.scss
scss
1/* Layout */ 2@use "hoge";
_hoge.scss
scss
1.hoge { 2 color: red; 3}
下記でインストールしてから
npm install --save-dev gulp sass gulp-sass
下記で実行します
npx gulp sass
回答1件
あなたの回答
tips
プレビュー