npm-scriptsでSCSSをコンパイルしてみよう！

sassをコンパイルする方法として、gulpを使っていますが、npm-scriptsが主流になってきています。npm-scriptsを使うメリットとして、記述がシンプルでバージョン依存が少なく共有がしやすいことが挙げられます。

今回はnpm-scriptsを使ってSass/Scssのコンパイルする方法についてまとめてみようと思います。

準備とSCSSをコンパイル

まずは任意のディレクトリにサンプルとして「sass_test」ディレクトリを作成し移動します。

mkdir sass_test
cd sass_test

今回使用するsassファイルを作成します。
ディレクトリは下記を想定しています。

sass_test
└resources
 └sass
  └style.scss
└dist
 └sass
  └style.css

「sass_test」の中でpackage.jsonを生成します。
「sass_test」に移動して、ターミナルで下記のコマンドを入力すると「package.json」が生成されます。
（質問は全てenterで大丈夫です）

npm init

sassのコンパイルとして、「Sass」をインストールします。

npm install sass --save-dev

package.jsonの「scripts」欄を次のように変更します。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

↓

  "scripts": {
    "sass": "sass resources/sass/:dist/css/ --no-source-map --watch"
  },

sassをコンパイルするために下記を「sass_test」の階層で実行します。

npm run sass

「dist/css/」ディレクトリに「style.css」が生成されたと思います。
（終了するには[Ctrl + C]を押します。）
sassをコンパイルするのみならこれだけです。

自動でベンダープレフィックスを付与

自動でベンダープレフィックスを付与するために「autoprefixer」をインストールします。
合わせて「postcss」「postcss-cli」をインストールします。

npm install postcss postcss-cli autoprefixer --save-dev

複数のnpm-scriptsを実行するために「npm-run-all」をインストールします。

npm install npm-run-all --save-dev

ファイル変更の監視をするために「watch」をインストールします。

npm install watch --save-dev

package.jsonの「scripts」欄を次のように変更します。

  "scripts": {
    "all": "run-p watch",
    "watch": "watch 'run-s scss postcss' ./resources/sass",
    "scss": "sass resources/sass/:dist/css/ --no-source-map",
    "postcss": "postcss dist/css/style.css -o dist/css/style.css"
  },

pakcage.jsonと同じ階層に「postcss.config.js」を作成します。

module.exports = {
  plugins: [
    require('autoprefixer')()
  ]
}

そしてpakcage.jsonと同じ階層に「.browserslistrc」を作成します。
ブラウザリストはここで調整します。

last 2 versions
ie >= 11
Android >= 7

それではコンパイルしてみましょう。
「resources/sass/style.scss」に下記を記載します。

a{
  transition: 0.3s all;
  color: red;
  
  p{
    color: green;
  }
}

次にターミナルでpackage.jsonと同じ階層で下記を実行します。

npm run all

そうすると、「dist/css/style.css」に下記が出力されています。

a {
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
  color: red;
}
a p {
  color: green;
}

無事にsassがベンダープレフィックスがついてコンパイルされていることが確認できました。
（終了するには[Ctrl + C]を押します。）

以上がnpm-scriptsを使ったsassのコンパイル方法をです。
読んでいただいた方の参考になればと思います！

コメント