0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

vsCodeの拡張機能を使わずにscssファイルをコンパイルしたい

Last updated at Posted at 2025-08-16

環境構築する機会にまた忘れていそうなので軽くまとめておく

scssとsassの違い

Sassはcssの記述を効率的にしたもの
scssとsassのどちらもSassであり、記述方法と拡張子が違うだけ

インストール

プロジェクトに移動した後、以下のコマンドを順に実行(※node.jsはインストールされている前提)

> npm init -y  //package.jsonが作成される
> npm install --save-dev sass  //node_modulesとpackage-lock.jsonが生成

package.jsonのdevDependenciesにsassが入っていることを確認
次に、scriptsを以下の記述に変更する

"scripts": {
    "sass": "sass --watch src/style.scss css/style.css"
},
> npm run sass

これで更新したら常にコンパイルしてくれるようになった。

参考記事:
Live Sass Compilerを使わずにSassをコンパイルする環境を作る方法

「いまさら聞けないSCSSとSASSの違い」初心者向け完全ガイド ✨

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?