簡単にローカルなSASS環境構築

HTML&CSS

SASSを毎日使用するような人は自分にあった環境を作り込んでいると思います。けれども時々使いたい場合、Gulpで環境作るのは面倒だし、エディタに設定していたはずのものがなぜかうまく動かないなどと困った場合に、手軽にローカルな環境構築をする方法です。
ローカルですから対象のフォルダ内だけ有効になります。

すでにNode.jsが導入されていうことが前提です。
まず、node-sassを対象フォルダにインストールします。

ここからはターミナル(Macの場合)を使います。
新規でプロジェクトフォルダを作成します。
cdで作成したフォルダに移動したら、次のコマンドで初期化します。色々聞かれますが、returnで進みます。

npm init

「package.json」が作成されたことを確認したら次のコマンドで「node-sass」をインストールします。

npm install node-sass

次に「package.json」のscript部分をを次のように編集します。

"scripts": {
    "compile:sass":"node-sass sass/main.scss css/style.css -w"
  }

「sass」フォルダに「main.scss」ファイルを新規作成してSASSコードを記述します。
出力先のCSSはCSSフォルダ内の「style.css」になります。

ターミナルで次のコマンドを入れるとコンパイルされて「style.css」が出来上がります。
また、設定に「-w」つまり「watch」オプションを付けていますので、以降は変更を保存するだけでコンパイルされるようになります。

npm run compile:sass

Node.jsを導入してない場合は「バージョン管理付きNode.jsの導入方法〜Mac用」を参考にしてください。

タイトルとURLをコピーしました