DartSass で 好きなフォルダーにcssファイルを出力する

現在、デイトラの上級のブログと「unazuki」を参考にしながらポートフォリオサイトの改修を進めている。

cssの読み込みの順で気が付いた

cssの読み込みの正しい流れは以下の順だろう。

この順番を守りたいので、リセットcssだけ自作のcssに組み込まないで、一番最初に先に読みこませていた。

でも、いろいろサイト読んで知った。
なるほど、外部のcssを自作のcssファイルに組み込めばいいのか。

実際にできるかどうかはこのポートフォリオサイトを作成しながら検証していこうと思う。

で、今日の本題。

style.css は決められたファイルに出力したい

css作成の効率を上げるためにFlOCSSを参考にファイルの構成を考えて作った。
少しでも作業軽減したいのでstyle.css は決められたファイルに出力したい。

画像を貼る余裕がないので、文字ベースで失礼。

Dartsass: Target Directory を設定する

DartSass で cssファイルの出力先は設定がなければ style.scss と同じ階層に出力される。

ワークスペースに読み込んだフォルダーからの絶対パスを書く。

これ、いっつも相対パスで書いてしまって軽く沼るのでメモ。

DartSass:Output format を設定する

既定の設定でboth。一番左の列。

私は、「cssonly」にした。

style.css と style.min.css では min の方がスペースとか改行が削除されていてファイルサイズが小さい。