Edited at

parcel便利過ぎ。もうless、scss、stylusのコンパイルで悩むことはない。

すごいすごいとは聞いていたparcelですが、webpackで良いかと思って触っていませんでした。しかし今回新しくstylusの環境を構築をするため、試しに使ってみて驚きました。

これは使わない理由がない。

parcelの追加からscssのコンパイルまでを説明します。


parcelのインストール

デモ用のプロジェクトを作り、parcelを追加するまで。

# プロジェクトの作成

$ mkdir parcel-practice
$ cd parcel-practice

# package.jsonの作成
$ yarn init
# parcelのインストール
$ yarn add parcel


scssファイルの作成

デモ用のscssファイルを作ります。

まず依存されるscssファイルの作成。

$ mkdir src

$ vi src/_page.scss


_page.scss

$primary-color: #333;

body {
p {
color: $primary-color;
}
}


次に、エントリーポイントとなるscssファイルの作成

$ vi src/style.scss


style.scss

@import 'page'



コンパイル

いよいよコンパイル。

$ parcel src/style.scss

Server running at http://localhost:62665 - configured port 1234 could not be used.
✨ Built in 44ms.

以上です!!!!

これでdistフォルダが自動的に作成されて、内部にstyle.cssが生成されます。


dist/style.css

body p {

color: #333;
}

しかも、、

変更監視も自動で行います!

_page.scssやstyle.scssに変更を加えて見てください。

自動的に再コンパイルが実行されるはずです。

もちろん、依存関係のあるファイルの変更も同様に監視します!


ベンダープレフィックスを付与したい場合

クロスプラウザ対応のためのベンダープレフィックスの追加も、parcelなら設定ファイルを加えるだけでつけてくれます。

.postcssrcというファイルをプロジェクトディレクトリに追加します。

vi  .postcssrc

中身に以下を記載します。

{

"plugins": {
"autoprefixer": {},
}
}

これだけです。

試しにベンダープレフィックスが必要なスタイルを記述します。


_page.scss

$primary-color: #333;

body {
display grid
grid-template-columns 200px 1fr
p {
color: $primary-color;
}
}


コンパイルの実行

$ parcel src/style.scss

コンパイル結果は、、


dist/style.css

body {

display: -ms-grid;
display: grid;
-ms-grid-columns: 200px 1fr;
grid-template-columns: 200px 1fr;
}
body p {
color: #333;
}


stylus, lessへの対応

そのままstylファイル、lessファイルでscssと同様のことをすれば動きます。

$ parcel src/hoge.less

$ parcel src/hoge.styl


参考