npmでscssのビルド環境を構築する

web制作をしていく上で、cssをscss使ってかいて、ビルドしたいことが多々あるかと思います。その環境を毎回0から作っていたら手間だったので、備忘録的に書いておこうかと思います

前提条件

macで開発しており、nodeとnpmがすでにインストール済みである状態を想定しています。まだ見インストールの方はまず、nodeとnpmをインストールするところから始めてください

$ node -v
v12.14.0
$ npm -v
6.13.4

package.jsonを記述する

次にpackage.jsonを用意します。今回は、scssをcssに変換するのと、プレフィクサを自動でつけていきたいと思います。とりあえず、完成系をまず貼っておきます。解説はこの後していきます。

ディレクトリ構成は下記のようにします。scssディレクトリにstyle.scssを設置し、そのファイルがビルドの対象になります。そして、cssディレクトリ配下にstyle.cssという形で出力されます。

|- index.html
|- scss
  |- style.scss
|- css

package.json
{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "npm run sass& npm run autoprefixer",
    "sass": "node-sass --include-path scss scss/style.scss css/style.css --output-style compressed",
    "autoprefixer": "postcss --use autoprefixer --no-map css/style.css -d css/"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "^9.7.1",
    "node-sass": "^4.13.0",
    "postcss": "^7.0.21",
    "postcss-cli": "^6.1.3"
  },
  "browserslist": [
    "last 2 versions",
    "Android >= 4",
    "iOS >= 9"
  ]
}

下記コマンドの実行で、必要なパッケージがインストールされ、ビルドが実行されます。

$ npm install
$ npm run build

インストールしているパッケージ

今回は、scssのビルドとプレフィックスの自動付与なので、必要なパッケージをインストールしています。
scssのビルドに必要なパッケージが下記の3つになります。

"node-sass": "^4.13.0",
"postcss": "^7.0.21",
"postcss-cli": "^6.1.3"

プレフィックスの自動付与が下記の1つです。

"autoprefixer": "^9.7.1",

実行コマンド

実行はnpm run build で実行します。下記が実行部分のscriptになります。

"scripts": {
    // scssのビルドとプレフィックスの自動付与を実行する
    "build": "npm run sass & npm run autoprefixer",
    // scssのビルド
    "sass": "node-sass --include-path scss scss/style.scss css/style.css --output-style compressed",
    // プレフィックスの自動付与
    "autoprefixer": "postcss --use autoprefixer --no-map css/style.css -d css/"
  },

まとめ

scssのビルドとプレフィックスの自動付与について簡単に解説しました。これでscssの導入の手助けになればと思います。