vscodeでsassをコンパイルする方法

#vscode を使用して sass をコンパイルする

最初のステップは、vscode に easy sass をインストールすることです。下の図は、正常にインストールされた状態を示しています

2 番目のステップ、vscode の構成を変更します

"easysass.compileAfterSave": true, 
 "easysass.formats": [ //nested：嵌套缩进的 css 代码。
//expanded：没有缩进的、扩展的css代码。
//compact：简洁格式的 css 代码。
//compressed：压缩后的 css 代码

        {
            "format": "expanded",
            "extension": ".css"
        },
        {
            "format": "compressed",
            "extension": ".min.css"
        }
    ],
    "easysass.targetDir": "css/" //路径

3 番目のステップ、新しいフォルダーを作成します。まだ作成していない場合は、そのフォルダー内に 2 つの新しいフォルダー (sass と css を 1 つ) を作成します。 css フォルダーを作成すると、コンパイル後にフォルダーが自動的に作成されます。

4 番目のステップで、sass の下に demo.sass を作成し、

5 番目のステップを記述します。手順は、ctrl s を押して直接コンパイルします 先ほどの設定時に easysass.compileAfterSave を true に設定しているため、保存後に一度コンパイルされます これは開発効率を上げるためでもあります

最後に、 css の下にある追加の css ファイル、min.css ファイル。これは設定した設定に関連しており、1 つはインデントなし、もう 1 つは圧縮されています

#この記事は、 PHP 中国語 Web サイトの

vscode チュートリアル

列。

以上がvscodeでsassをコンパイルする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。