vue3+tailwindcss2の環境構築時のエラーにはまり抜き出せず。

はじめに

• 前回、構築したVue3+TypeScriptの環境ににtailwindcssをインストールした

px-wing.hatenablog.com px-wing.hatenablog.com

結論

• 下記のエラーが発生してエラーを解消できなくなってしまった。

 INFO  Starting development server...
98% after emitting CopyPlugin

 ERROR  Failed to compile with 1 errors                                                          1:33:45 PM

This relative module was not found:

* ../assets//fonts/Inter.ttf in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-3-1!./node_modules/postcss-loader/src??ref--8-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-3-3!./src/styles/index.scss
ERROR in src/components/HelloWorld.vue:33:10
TS2614: Module '"../../node_modules/vue-class-component/lib"' has no exported member 'Options'. Did you mean to use 'import Options from "../../node_modules/vue-class-component/lib"' instead?
    31 | 
    32 | <script lang="ts">
  > 33 | import { Options, Vue } from 'vue-class-component';
       |          ^^^^^^^
    34 | 
    35 | @Options({
    36 |   props: {

ERROR in src/components/HelloWorld.vue:33:19
TS2614: Module '"../../node_modules/vue-class-component/lib"' has no exported member 'Vue'. Did you mean to use 'import Vue from "../../node_modules/vue-class-component/lib"' instead?
    31 | 
    32 | <script lang="ts">
  > 33 | import { Options, Vue } from 'vue-class-component';
       |                   ^^^
    34 | 
    35 | @Options({
    36 |   props: {

結果

• 下記のサイトでvue3+tailwindcss+typescriptの環境構築できるサンプルがあったので、こちらをベースに勉強しようかと思いました。 github.com

エラーの原因かと思うポイント1

• 自分と異なる点はpostcssのバージョンだと思った。成功しているpackege.jsonのpostcss7になっている。

{
  "name": "vue3-tailwind2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "autoprefixer": "^9.8.6",
    "core-js": "^3.6.5",
    "postcss": "^7.0.35",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3"
  }
}

自分の環境のpackege.jsonは下記のようになっている。

{
  "name": "vue3-tailwind2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "autoprefixer": "^9.8.6",
    "core-js": "^3.6.5",
    "postcss": "^7.0.35",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1",
    "vue": "^3.0.0",
    "vue-class-component": "^7.2.6",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3"
  }
}

参考の記事

• 下記の記事を見るかぎり、postcss8はvue2しか対応していなく、postcss7にダウングレードすると良いという記事がある。 tailwindcss.com

stackoverflow.com

エラーの原因だろうポイント2

• vue-class-componentをまだサポートしていないような気がする.

参考の記事

• 現在、対応中で、対応完了したらお知らせするらしい。 github.com

結論

• ２つ上げた問題点を利用していないサンプルソースは、ちゃんと動作する。

実行結果

• 下記のように実行される。