前回はGridsomeのインストールとTypeScriptの導入記事を書きましたが、今回はStylusの導入方法を書きます。

Stylusの設定自体はそんなに難しくありません。

必要なライブラリのインストール

難しくないとはいえ、必要なライブラリのインストールは必要です。

• Stylus
• autoprefixer(PostCSS) … ベンダープレフィックスを自動付与
• mqpacker(PostCSS) … 同一MediaQueryをひとまとめにする

$ yarn add -D stylus autoprefixer css-mqpacker stylus-loader postcss-loader

gridsome.config.jsに追記

設定方法はドキュメントにもあります。

module.exports = {
  // 中略
  css: {
    loaderOptions: {
      stylus: { preferPathResolver: 'webpack' },
      postcss: {
        sourceMap: false,
        plugins: [
          require('autoprefixer')({ grid: 'autoplace', flexbox: 'no-2009' }),
          require('css-mqpacker')()
        ]
      }
    }
  }
}

対応ブラウザを決める

autoprefixerは対応ブラウザを決めることができます。
package.jsonに"browserslist": "xxx"と記述するか、.browserslistrcというファイルを用意することで自動的に適用できます。

詳しいことはBrowserslistの公式サイトを参考にしてください。