Closed2021/09/04にクローズ26

Gatsby.js + Linaria 導入備忘録

ピン留めされたアイテム

GatsbyにLinariaを導入する方法

必要なパッケージをインストール

yarn add gatsby-plugin-typescript gatsby-plugin-linaria linaria

`gatsby-config.js`にpluginを読み込ませる

※ typescriptを利用している場合は、gatsby-plugin-typescriptをgatsby-plugin-linariaよりも前に宣言する。
※ 現Gatsbyでは、gatsby-plugin-typescriptを用いなくてもtypescriptが利用できるようになっているが、この対応は必須である。

plugins: [
    `gatsby-plugin-typescript`,
    `gatsby-plugin-linaria`
  ]

.gitignoreに.linaria-cacheを追加する。

.linaria-cache

スタイリング

Emotionなどと同様にスタイリングすることができる。
cxAPIを用いればextendsみたいなこともできる。（*1）
- classNamesでも同様のことが可能だと思われる。（*2）

*1）

import { css, cx } from 'linaria'

const inner = css`
  margin: auto;
`

export const linaria = cx(css`
  height: 200px;
  width: 400px;
  background: black;
`, inner)

*2）
https://github.com/JedWatson/classnames

GatsbyでLinaria使いたい。

以前までEmotionを利用していたが、Linariaが気になったので乗り換えてみようと思う。

早速Gatsbyのプラグインを見つけたので使ってみたが、エラーが発生した。

Error: Using the "css" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly.

LinariaのリポジトリにGatsbyの欄があったので確認してみたが、

最速で簡単！gatsby-plugin-linariaと言われても、今失敗したんだよなぁという気持ちになる。

すぐ下にカスタムコンフィグがあったので試してみる。

カスタムコンフィグ触ってる道中でやたら、module無いからインストールしてねって言われる。

もしかして色々足りないのでは？

一旦、plugin
に戻って触ってみる。

Error: Using the "css" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly.

同様のエラーになりました。悲しい

かこなーる

ちなみにですがlinariaをこちらのバージョンでインストールしてみてもだめでしょうか。
現行のものだとTSやBabelの設定などでエラーを吐く場合があるようです。
yarn add linaria@^1.4.0-beta.3
yarn add core-js

ありがとうございます！試してみましたが、エラー変わらずでした。😭

かこなーる

なんの力にもなれず申し訳ない😭

プロジェクトの途中から現在導入しようとしているので原因の切り分けのため、初回から導入を試みる

ここ読みながら進めていく

npx gatsby new my-project

を実行

yarn add gatsby-plugin-linaria linaria

add gatsby-config.js

plugins: [
  'gatsby-plugin-linaria',
]

始めから動作させたらうまくいった...

つまり、既存プロジェクトの方に問題がある。

developで試験中。。

かこなーる

既存プロジェクトへ下記を追加

yarn add gatsby-plugin-linaria linaria@beta
yarn add gatsby-plugin-typescript
yarn add babel-preset-gatsby

gatsby-config.jsへ下記追記してください。

plugins: [
  /*
  * gatsby-plugin-typescriptは必ず
  * gatsby-plugin-linariaより上で読み込む
  */
  {
    resolve: `gatsby-plugin-typescript`,
    options: {
      isTSX: true,
      jsxPragma: `jsx`,
      allExtensions: true,
    },
  },
  'gatsby-plugin-linaria',
]

こちらでlinariaが正常に動作するのを確認できました。
TypeScriptをビルドする際のBabelの何かしらの設定が影響してるんでしょうか・・・。
申し訳ないですが詳しいことはわかってません・・・。

導入したところ、正常動作とはいきませんでしたが、エラーが変わりました！
ありがとうございます。

Emorionで通用していた記法の方に問題があるのかなぁ...

yarn add gatsby-plugin-typescript gatsby-plugin-linaria linaria

実施後
gatsby-config.jsに下記を記載

plugins: [
    `gatsby-plugin-typescript`,
    `gatsby-plugin-linaria`
  ]

pages/index.tsxに対して

import { css } from 'linaria'

const linaria = css`
  height: 200px;
  width: 200px;
  background: black;
`

<div className={linaria}></div>

を実施したところ正常に動作を確認。

gatsby-plugin-typescriptが既に組み込まれてるのに宣言しなきゃいけないことに少し腑に落ちなさを感じている。

次は継承系について調査する。

sassでいうところのmixinのinclude

みっけた。classNamesみたいなもんか。

import { css, cx } from 'linaria'

const inner = css`
  margin: auto;
`

export const linaria = cx(css`
  height: 200px;
  width: 400px;
  background: black;
`, inner)

できました。

これである程度やりたいことの条件が揃った。まとめよう

EmotionからLinariaへの
コンバートが完了しました。

記事に起こしました。

このスクラップは2021/09/04にクローズされました