さとうテック

氷砂糖の技術メモ

Hyperでfishを使用する

準備 fishのインストール brewでfishをインストールする。 brew install fish 設定の編集 メニューから Hyper -> Preferences... を選択し、.hyper.js を開く。config.shell の値が(今までに書き換えていなければ) '' になっているので、'/usr/local/bin/f…

Nuxt.jsでTailwindCSSを使用する

準備 パッケージを追加 プロジェクトに @nuxtjs/tailwindcss を追加する。 yarn add --dev @nuxtjs/tailwindcss 設定を編集 nuxt.config.js にモジュールを追加する。 export default { buildModules: [ '@nuxtjs/tailwindcss' ] } ここで yarn dev すると、…

MacのVisualStudioCodeのショートカット

現在の行と上の行を入れ替える option + ↑ 現在の行と下の行を入れ替える option + ↓ ファイル内検索 command + F プロジェクト内検索 shift + command + F ファイル名で検索して開く command + P

TailwindCSSをGulpでビルドする

準備 パッケージの追加 yarn add --dev gulp gulp-postcss tailwindcss CSSファイルの作成 css/style.css @tailwind base; @tailwind components; @tailwind utilities; gulpfileの作成 以下のコードは、css/style.css を変換し source/css へ出力する。 gul…

GridsomeでMarkdownファイルを使用する

準備 パッケージを追加 プロジェクトに @gridsome/source-filesystem と @gridsome/transformer-remark を追加する。 yarn add @gridsome/source-filesystem @gridsome/transformer-remark 設定を編集 gridsome.config.js にプラグインを追記する。 module.e…

GridsomeでTailwindCSSを使用する

準備 パッケージを追加 プロジェクトに tailwindcss を追加する。 yarn add tailwindcss 設定を編集 gridsome.config.js にプラグインを追記する。 const tailwindcss = require('tailwindcss') module.exports = { css: { loaderOptions: { postcss: { plug…

GridsomeでPugを使用する

準備 パッケージを追加 プロジェクトに pug と gridsome-plugin-pug を追加する。 yarn add --dev pug gridsome-plugin-pug 設定を編集 gridsome.config.js に gridsome-plugin-pug を追記する。 module.exports = { plugins: [ { use: 'gridsome-plugin-pug…