すごいすごいとは聞いていた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