SCSSを使い始めて長らくなりますが、importしたSCSSファイルをCSSに書き出しをしたまま本日に至っていました。
例えば、私は変数をまとめるSCSS（variables.scss）とslickテーマのSCSS（slick-theme.scss）を、読み込むことが多く、以下のようなコードを記述していました。
@import "variables.scss";
@import "slick-theme.scss";上記ファイルを編集して保存すると、variables.cssとslick-theme.cssというファイルが書き出しされてしまいます。
variables.cssとslick-theme.cssのファイルは運用には必要のないファイルですので、できれば書き出しされない方法があれば良いなと感じていましたので少し調べてみましたところ、importするファイル名にアンダースコア（アンダーバー）を付与すれば良いという内容を見かけて早速ファイル名を_variables.scss、_slick-theme.scssに修正、SCSSファイルも同じように修正します。
@import "_variables.scss";
@import "_slick-theme.scss";このようにファイル名を変更して、_variables.scssを保存してみるとvariables.cssは書き出されず、import元のSCSSファイルのcssファイルのみが書き出しされるようになります。_slick-theme.scssを保存しても同じような動作をします。
※SCSSのコンパイル方法によっては意図した通りの動作にならない場合もあるかもしれませんが、同じようにお悩みの方は一度お試しください。
SCSSの仕様が分かっていれば今までこんな不要なファイルを書き出すこともなかったかと少し反省です。しかし、これからはCSSの書き出し時間も早くなるため業務改善にもつながります！
と、今回はSCSSの@importにさらっと触れましたが、@importは2022年10月に非推奨（廃止される）予定となっているようで、@useに置き換えましょうという動きにもなっているようです。
このあたりもいずれは直面する問題だと思いますので、実践しながら、備忘録に残したいことをまたコラムにしたいと思います。
コメント