みかづきブログ・カスタム

基本的にはちょちょいのほいです。

Nuxt.js + TypeScript(+ nuxt-property-decorator) + SCSSでプロジェクトを作る ✌️

f:id:kimizuka:20200811145835p:plain

昔はReact派だった僕も、いまとなってはJavaScriptの書き方的にはReactでもVueでもどちらでも構わないぐらいになってきました。
NextJSNuxt.jsを比べると、CSSの管理の仕方がNuxt.jsの方が好き、というかSFCが好きなので、どっちでも良いと言われた時は、もっぱらNuxt.jsでプロジェクトをつくってます。

Nuxt.jsでプロジェクトをつくる時、TypeScript(+ nuxt-property-decorator)とSCSSは必ず
導入しておきたくて、導入手順のメモを残しておこうと思います。

導入手順

Nuxt.jsでプロジェクトを作成

yarn create nuxt-app <project-name>

npmでもyarnでも良いのですが、最近はyarn派です。
一回、yarn + Nuxt.js + TypeScriptでハマったこともあるのですが、最近は安定しているので、安心してyarnを使ってます。

? Project name: プロジェクト名
? Programming language: TypeScript
? Package manager: Yarn
? UI framework: None
? Nuxt.js modules: Axios
? Linting tools:
? Testing framework: Jest
? Rendering mode: Universal (SSR / SSG) 
? Deployment target: Server (Node.js hosting) 
? Development tools:
? Continuous integration: None
? Version control system: Git

Rendering modeとDeployment targetは環境に併せますが、プロジェクトをつくる時の選択肢はだいたいこんな感じです。
これでTypeScriptは導入完了です。

nuxt-property-decoratorの導入

yarn add nuxt-property-decorator

でOKです。
かつて、

yarn add -D nuxt-property-decorator

導入してハマったことがあったので、必ずdependenciesに追加するようにしています。

tsconfig.jsonの編集

"strictPropertyInitialization": false

を追加してます。

SCSSの導入

yarn add -D sass-loader node-sass @nuxtjs/style-resources

でOKです。
厳密には@nuxtjs/style-resourcesは必須ではないのですが、グローバルでSCSSを読み込みたいので導入してます。
nuxt.config.jsonに、

styleResources: {
 scss: [
    '~/assets/css/variable.scss',
    '~/assets/css/extend.scss',
    '~/assets/css/mixin.scss',
    '~/assets/css/keyframe.scss'
  ]
}

と追加して、変数やmixinを全ファイルから呼び出せるようにしているのですが、近々SASSに名前空間が導入されるみたいなので、いずれは変更しなければならないのだろうなと思っています。

sass-lang.com

sass-lang.com