静的サイトSCSSで開発できる環境を作ってみた

CSSとSCSSの素振り用のプロジェクトを作ったときのメモです。
初心者なので、間違っている部分があるかもしれません。

npm

npmというNode.jsのパッケージマネージャーがインストールされていることを確認。
インストールされていないときは、homebrewとかで事前にインストールしておく。

↓このコマンドでインストールされているかを確認しておく。

$ npm -v

ファイルを作る

$ cd
$ mkdir scss-env && cd scss-env
$ mkdir scss css
$ touch index.html scss/style.scss

npmでプロジェクトを初期化

↓コマンド

$ npm init -y

すると、こんな感じのjsonができる。

{
  "name": "scss-env",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

必要なnpmパッケージをインストールします。

-Dをつけると、開発用にインストールされるらしい？

$ npm i -D node-sass

scssの変換設定

さっき作ったpackage.jsonのscriptの項目を変更します。

{
  "name": "scss-env",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build-css": "node-sass --include-path scss scss/style.scss css/style.css"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "node-sass": "^4.8.3"
  }
}

実行

こんな感じのscssを書いて変換してみる。

style.scss

$header: #59c323;

header {
  color: $header;

  & .item {
    font-size: 12px;
  }
}

実行

$ npm run build-css

出力結果はこんな感じ↓

style.css

header {
  color: #59c323; }
  header .item {
    font-size: 12px; }

cssを読み込む側のhtmlでは、出力されるcssのファイル名を指定しておけば良いみたい。