Garbanzo Note

NPMモジュールで作るSass(CSS)開発環境

May 16, 2020

この記事は1年以上が経過しています。内容が古い可能性があります。

目次


SassでのWebページ開発時に、CSSに自動コンパイル、ブラウザに自動反映(ホットリロード)を実行して快適に開発したい!!

今回は、node-sassを使用したSass開発構築手順のまとめ。

構築手順

npm 初期化

まずは、package.jsonを作成する

npm init -y

必要なnodeモジュールインストールする

npm install --save-dev node-sass browser-sync npm-run-all

ファイルの作成・変更する

1. style.scssを作成(中身は空で良い)

$ touch style.scss

2. index.htmlを作成

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
   <h1>Hello World! </h1>
</body>
</html>

3. package.jsonを修正する

...
  "scripts": {
    "start": "run-p server compile:sass",
    "server": "browser-sync start --server --files .",
    "compile:sass": "node-sass style.scss style.css -w"
  },
...

上記scriptsを追加する

ファイル構成

最終的に以下のファイル構成になる

├── index.html
├── package-lock.json
├── package.json
├── style.css
└── style.scss

開発する

npm start

コマンドを実行し、style.scssを編集する。

保存時にコンパイルとホットリロードが走る。

これで快適に開発が可能。


Garbanzo

Webエンジニアの備忘録です。 学んだことをアウトプットしています。

合計記事数
25