More than 3 years have passed since last update.

Dockerでscssを書く

Last updated at 2019-12-22Posted at 2019-12-22

#Dockerでscssを書く
普段のちょっとした開発を試すときとか、scss使って効率よくしたいなと思ったので、備忘録です。
前準備としてはこちらが必要です。
Dockerで開発環境構築（Mac + Nginx + PHP-FPM）

##docker-compose.ymlの編集
npmを使います。

追加

  node:
    image: node:latest
    ports:
      - "8000:80"
    volumes:
      - ./:/src
    working_dir: /src

nodeの部分は好きな名前に変更してください。
latestの部分は任意のversionに変更可能です。

##node install

$ docker-compose run --rm node npm init

package.jsonが作成されます。

##sassをインストール

sassをコンパイルできるnode-sassをインストール。

$ docker-compose run --rm node npm install node-sass

package.jsonへの記述

package.json

  "scripts": {
    "css/scss": "node-sass src/scss/style.scss -o src/dist/css --output-style expanded",
  }

scssファイルを作りstyle.scssの中にscss記法で何か書きます。

その後npmを実行します。

$ docker-compose run --rm node npm run css/scss

srcディレクトリの中にdistでディレクトリが作成されるはずです。
このdistディレクトリの中にcss/style.cssがあるはずです。

それがコンパイラされたstylesheetです。

以上になります。