SSSをCSSにコンパイルし、変更を監視する方法

あなたがケーキの上にサクラのようなsassの特徴プラスCSSのすべての特徴を持つことができることを意味します!
ブラウザーはわかりませんSASS , 彼らが理解しないようにJSX (有効なJavaScriptにコンパイルされます).ですから、ブラウザで実行するには、通常のCSSにsassをコンパイルする必要があります.
sassファイルをどのようにしてCSSファイルに変換するかを見てみましょうSASS already installed あなたのシステムに.

ファイルのコンパイル

このようなフォルダ構造を持っているとしましょう.

public/
-> styles/

src/
-> styles/
    -> style.scss

ファイルをコンパイルする必要があります.scss 最終的にsassファイルである拡張子はpublic/styles ディレクトリ.
このコマンドは、フォルダのルートで端末で実行することで実現できます.

sass src/styles:public/styles

コロン以前のディレクトリ: 入力ディレクトリとコロンの後のディレクトリは出力ディレクトリです.
あなたのsassファイルをルートディレクトリに持っていて、同じルートディレクトリにCSSファイルを出力したい場合は、以下のようにします.

sass style.scss style.css

Here, 'root directory' means the directory you are currently pointing to in your terminal.

しかし、私たちがSSSファイルと同じディレクトリにCSSファイルを置くことを望むならば?上記のコマンドを実行するだけで行うことができます.

sass src/styles:src/styles

さて、ジューシーな部分に行きましょう.どうやってできるか見ましょうwatch 変更は私たちのscssファイルに行われ、自動的にCSSにコンパイルします.

SASSの変化を見る

ジャストアド--watch SASSファイルの変更を見るコマンドのフラグsrc/styles ディレクトリ.

sass --watch src/styles:public/styles

それです.さて、あなたがsassファイルで作る変更は、あなたがsassファイルを保存するとすぐにCSSに自動的にコンパイルされます!
また、vscodeを使用している場合は、使用することができますan extension SassファイルをCSSにコンパイルするには、それは非常にsassに対処するために便利になりますが、それもそれがある!
サインオフ.

This post was originally published in Syntackle!

陳川GitHub