Merge pull request #450 from kaizumaki/feature/issue-449-fix-order-css

vuetifyのcssとコンポーネントのcssの読み込み順番がproductionとdevelopmentで同一になるように修正

Author: NEKOYASAN

nuxt.config.js

@@ -1,5 +1,4 @@
 import i18nConfig from './nuxt-i18n.config.js'
-const colors = require('vuetify/es5/util/colors').default
 const environment = process.env.NODE_ENV || 'development'
 
 export default {
@@ -83,7 +82,10 @@ export default {
   /*
    ** Global CSS
    */
-  css: [],
+  css: [
+    'vuetify/dist/vuetify.min.css',
+    '@mdi/font/css/materialdesignicons.css',
+  ],
   /*
    ** Plugins to load before mounting the App
    */
@@ -92,6 +94,7 @@ export default {
       src: '@/plugins/amplify',
       ssr: false,
     },
+    '@/plugins/vuetify',
   ],
   /*
    ** Nuxt.js dev-modules
@@ -100,7 +103,7 @@ export default {
     // Doc: https://github.com/nuxt-community/stylelint-module
     '@nuxtjs/stylelint-module',
     '@nuxt/typescript-build',
-    '@nuxtjs/vuetify',
+    '@nuxtjs/style-resources',
   ],
   typescript: {
     typeCheck: true,
@@ -129,27 +132,6 @@ export default {
       families: ['Roboto&display=swap', 'NotoSansJP&&display=swap'],
     },
   },
-  /*
-   ** vuetify module configuration
-   ** https://github.com/nuxt-community/vuetify-module
-   */
-  vuetify: {
-    customVariables: ['~/assets/variables.scss'],
-    theme: {
-      dark: false,
-      themes: {
-        dark: {
-          primary: colors.blue.darken2,
-          accent: colors.grey.darken3,
-          secondary: colors.amber.darken3,
-          info: colors.teal.lighten1,
-          warning: colors.amber.base,
-          error: colors.deepOrange.accent4,
-          success: colors.green.accent3,
-        },
-      },
-    },
-  },
   env: {
     APIKEY: process.env.APIKEY,
     AUTHDOMAIN: process.env.AUTHDOMAIN,
@@ -208,4 +190,7 @@ export default {
       }
     },
   },
+  styleResources: {
+    scss: ['~/assets/variables.scss'],
+  },
 }

package.json

@@ -31,6 +31,7 @@
     "@nuxtjs/axios": "^5.12.2",
     "@nuxtjs/dotenv": "^1.4.1",
     "@nuxtjs/pwa": "^3.0.2",
+    "@nuxtjs/style-resources": "^1.0.0",
     "@types/node": "^14.11.2",
     "aws-amplify": "^3.3.3",
     "cookieparser": "^0.1.0",
@@ -46,15 +47,16 @@
     "nuxt-webfontloader": "^1.1.0",
     "uuid": "^8.3.1",
     "vue-property-decorator": "^9.0.2",
+    "vuetify": "^2.3.13",
     "vuex": "^3.5.1",
     "vuex-class-component": "^2.3.5"
   },
   "devDependencies": {
+    "@mdi/font": "^5.6.55",
     "@nuxt/types": "^2.14.6",
     "@nuxt/typescript-build": "^2.0.3",
     "@nuxtjs/eslint-config-typescript": "^3.0.0",
     "@nuxtjs/stylelint-module": "^4.0.0",
-    "@nuxtjs/vuetify": "^1.11.2",
     "@types/jest": "^26.0.14",
     "@vue/test-utils": "^1.1.0",
     "babel-core": "^6.26.3",
@@ -70,9 +72,11 @@
     "husky": "^4.3.0",
     "jest": "^26.4.2",
     "lint-staged": "^10.4.0",
+    "node-sass": "^4.14.1",
     "nodemon": "^2.0.4",
     "prettier": "^2.1.2",
     "rimraf": "^3.0.2",
+    "sass-loader": "^10.0.3",
     "stylelint": "^13.7.1",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^20.0.0",

src/plugins/vuetify.ts

@@ -0,0 +1,28 @@
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+import colors from 'vuetify/es5/util/colors'
+
+Vue.use(Vuetify)
+
+// @ts-ignore
+export default (ctx) => {
+  const vuetify = new Vuetify({
+    theme: {
+      dark: false,
+      themes: {
+        dark: {
+          primary: colors.blue.darken2,
+          accent: colors.grey.darken3,
+          secondary: colors.amber.darken3,
+          info: colors.teal.lighten1,
+          warning: colors.amber.base,
+          error: colors.deepOrange.accent4,
+          success: colors.green.accent3,
+        },
+      },
+    },
+  })
+
+  ctx.app.vuetify = vuetify
+  ctx.$vuetify = vuetify.framework
+}