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
-
node-sass: Sassのコンパイル
-
browser-sync: ホットリロード
-
npm-run-all: 複数のnpmスクリプトを実行
ファイルの作成・変更する
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
を編集する。
保存時にコンパイルとホットリロードが走る。
これで快適に開発が可能。