😺

npx create-nuxt-appでwarning

2023/03/29に公開

Nuxt

Vuetify

tech

環境

Node v16.18.1
npm 9.2.0

npx create-nuxt-app demo

上記コマンドでUI FrameworkにVuetifyを指定したNuxtプロジェクトをセットアップして、

npm run dev

したら下記のwarningが出ました。

 WARN  Compiled with 1 warnings                                                               friendly-errors 10:00:55


 WARN  in ./node_modules/vuetify/dist/vuetify.css                                             friendly-errors 10:00:55

Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):                              friendly-errors 10:00:55
Warning

(328:1) postcss-import: @charset must precede all other statements
                                                                                              friendly-errors 10:00:55
 @ ./node_modules/vuetify/dist/vuetify.css 4:14-138 15:3-20:5 16:22-146
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

package.jsonは下記のとおりです。

package.json

{
  "name": "demo",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint:prettier": "prettier --check .",
    "lint": "npm run lint:js && npm run lint:prettier",
    "lintfix": "prettier --write --list-different . && npm run lint:js -- --fix"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/pwa": "^3.3.5",
    "core-js": "^3.25.3",
    "nuxt": "^2.15.8",
    "vue": "^2.7.10",
    "vue-server-renderer": "^2.7.10",
    "vue-template-compiler": "^2.7.10",
    "vuetify": "^2.6.10"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.19.1",
    "@nuxtjs/eslint-config": "^11.0.0",
    "@nuxtjs/eslint-module": "^3.1.0",
    "@nuxtjs/vuetify": "^1.12.3",
    "eslint": "^8.24.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-nuxt": "^4.0.0",
    "eslint-plugin-vue": "^9.5.1",
    "prettier": "^2.7.1"
  }
}

素直に読むと、postcss-loaderがvuetify.cssを読み込んでみたけど、@charsetは他のstatementsよりもprecede（先行）しなくちゃダメですよ、ってことみたいです。

気になったのでvuetify.cssを覗いてみました。

VSCodeで開いてみると、確かに@charsetが途中にあります。
試しにファイルの先頭に移動させてみました。

vuetify.css

+ @charset "UTF-8";
.theme--light.v-application {
  background: #FFFFFF;
  color: rgba(0, 0, 0, 0.87);
}
/* 中略 */
.v-sheet:not(.v-sheet--outlined) {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.v-sheet.v-sheet--shaped {
  border-radius: 24px 0;
}
- @charset "UTF-8";
@-webkit-keyframes v-shake {
  59% {
    margin-left: 0;
  }
  60%, 80% {
    margin-left: 2px;
  }
  70%, 90% {
    margin-left: -2px;
  }
}

npm run devをしてみると、warningは出ませんでした。

以前は出なかったwarningなのでnpm listでnuxtのバージョンを確認してみると2.15.8 → 2.16.3がインストールされていました。
バージョンが上がったことによるものなのだろうかと思います。

環境

Discussion