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

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

.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;
}

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

$ parcel src/hoge.less
$ parcel src/hoge.styl