🎆

Nuxt 3 + Quasarで、Sass Variablesが使えない問題を解消した

2023/01/31に公開

最近は、Nuxt 3 + Quasarで開発しています。
普段の開発はできているのですが、Sass Variablesを使おうとしたらうまく動かずハマりました。

Sass Variablesとは

Sass Variablesは下記の$で始まるもので、Sassで定義できる変数となっています。

<!-- Notice lang="sass" -->  
<style lang="sass">  
div  
  color: $red-1  
  background-color: $grey-5  
</style>

各変数はquasarのvariables.sassで定義されています。

これを上記の様にvueファイル内で定義しても、not definedエラーが出ていました。

色々調べた結果、下記の記事で@quasar/vite-pluginというものが必要ということがわかりました。

ぼんやりとプリコンパイルや、トランスパイル辺りが関係しているんだろうなとは思っていたのですが、webpackやvite周りの理解が追いついていなくて、この辺を調べていくのはなかなか辛いものがあります。

こちらのリポジトリが非常に参考になりました。

@quasar/vite-pluginが導入されていて、動く状態になっています。

このリポジトリと自分のリポジトリを見比べながら、エラーを解消していきました。

途中で、Sass Variablesは使える様になったのですが、QuasarのDialog表示で使うuseDialogPluginComponent がnot defineというエラーが出ました。

色々とやった中で解消したので、何が引っかかっていたか結局のところ分からないのですが、yarn.lockを削除してバージョンを先ほどのリポジトリと完全に合わせてみたりしたところ、エラーは解消しました。

Nuxt 3 + Quasarの記事がまだまだ少ないので、誰かの役に立てばと思います。