Gatsby.js + Linaria 導入備忘録
hanetsukiGatsbyに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）
hanetsukiGatsbyでLinaria使いたい。
以前までEmotionを利用していたが、Linariaが気になったので乗り換えてみようと思う。
hanetsuki
早速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と言われても、今失敗したんだよなぁという気持ちになる。
すぐ下にカスタムコンフィグがあったので試してみる。
hanetsukiカスタムコンフィグ触ってる道中でやたら、module無いからインストールしてねって言われる。
もしかして色々足りないのでは？
hanetsuki一旦、plugin
に戻って触ってみる。
hanetsukiError: Using the "css" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly.
同様のエラーになりました。悲しい
hanetsukiプロジェクトの途中から現在導入しようとしているので原因の切り分けのため、初回から導入を試みる
hanetsukiここ読みながら進めていく
hanetsukinpx gatsby new my-project
を実行
hanetsukiyarn add gatsby-plugin-linaria linaria
add gatsby-config.js
plugins: [
'gatsby-plugin-linaria',
]
始めから動作させたらうまくいった...
hanetsukiつまり、既存プロジェクトの方に問題がある。
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の何かしらの設定が影響してるんでしょうか・・・。
申し訳ないですが詳しいことはわかってません・・・。
hanetsuki導入したところ、正常動作とはいきませんでしたが、エラーが変わりました！
ありがとうございます。
hanetsukiEmorionで通用していた記法の方に問題があるのかなぁ...
hanetsukiyarn 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>
を実施したところ正常に動作を確認。
hanetsuki
gatsby-plugin-typescriptが既に組み込まれてるのに宣言しなきゃいけないことに少し腑に落ちなさを感じている。
hanetsuki次は継承系について調査する。
sassでいうところのmixinのinclude
hanetsuki
みっけた。classNamesみたいなもんか。
hanetsukiimport { css, cx } from 'linaria'
const inner = css`
margin: auto;
`
export const linaria = cx(css`
height: 200px;
width: 400px;
background: black;
`, inner)
できました。
hanetsukiこれである程度やりたいことの条件が揃った。まとめよう
hanetsukiEmotionからLinariaへの
コンバートが完了しました。
hanetsuki記事に起こしました。