feat: パッケージのアップデート・デザイン崩れへの対応

Author: NEKOYASAN

nuxt.config.js

@@ -1,3 +1,5 @@
+import Sass from 'sass'
+import Fiber from 'fibers'
 import i18nConfig from './nuxt-i18n.config.js'
 const environment = process.env.NODE_ENV || 'development'
 
@@ -152,6 +154,14 @@ export default {
    */
   build: {
     publicPath: '/assets/',
+    loaders: {
+      scss: {
+        implementation: Sass,
+        sassOptions: {
+          fiber: Fiber,
+        },
+      },
+    },
     babel: {
       presets({ isServer }) {
         return [

package.json

@@ -5,11 +5,11 @@
   "author": "Nekoya3",
   "private": true,
   "scripts": {
-    "dev": "cross-env NODE_ENV=development nuxt-ts",
-    "build": "nuxt-ts build",
+    "dev": "cross-env NODE_ENV=development nuxt",
+    "build": "nuxt build",
     "test:unit": "jest --config jest.config.js",
-    "start": "nuxt-ts start",
-    "generate": "nuxt-ts generate",
+    "start": "nuxt start",
+    "generate": "nuxt generate",
     "lint": "eslint --ext .js,.vue,.ts --ignore-path .eslintignore ."
   },
   "lint-staged": {
@@ -24,65 +24,66 @@
     }
   },
   "dependencies": {
-    "@aws-amplify/api": "^3.2.7",
-    "@babel/core": "^7.12.1",
-    "@babel/runtime-corejs3": "^7.12.1",
-    "@nuxt/typescript-runtime": "^2.0.0",
-    "@nuxtjs/axios": "^5.12.2",
+    "@aws-amplify/api": "^3.3.3",
+    "@babel/core": "^7.14.3",
+    "@babel/runtime-corejs3": "^7.14.0",
+    "@nuxtjs/axios": "^5.13.4",
     "@nuxtjs/dotenv": "^1.4.1",
     "@nuxtjs/google-analytics": "^2.4.0",
-    "@nuxtjs/pwa": "^3.2.2",
+    "@nuxtjs/pwa": "^3.3.5",
     "@nuxtjs/style-resources": "^1.0.0",
-    "@types/node": "^14.11.8",
-    "aws-amplify": "^3.3.4",
-    "core-js": "^3.6.5",
-    "cross-env": "^7.0.2",
-    "date-fns": "^2.16.1",
-    "dayjs": "^1.9.3",
+    "@types/node": "^14.14.45",
+    "aws-amplify": "^3.4.3",
+    "core-js": "^3.12.1",
+    "cross-env": "^7.0.3",
+    "date-fns": "^2.21.3",
+    "dayjs": "^1.10.4",
     "express": "^4.17.1",
-    "nuxt": "^2.14.7",
-    "nuxt-i18n": "^6.15.3",
-    "nuxt-property-decorator": "^2.8.8",
+    "nuxt": "^2.15.6",
+    "nuxt-i18n": "^6.27.0",
+    "nuxt-property-decorator": "^2.9.1",
     "nuxt-svg-loader": "^1.2.0",
     "nuxt-webfontloader": "^1.1.0",
-    "uuid": "^8.3.1",
-    "vue-property-decorator": "^9.0.2",
-    "vuetify": "^2.3.14",
-    "vuex": "^3.5.1",
+    "uuid": "^8.3.2",
+    "vue-property-decorator": "^9.1.2",
+    "vuetify": "^2.5.0",
+    "vuex": "^3.6.2",
     "vuex-class-component": "^2.3.5"
   },
   "devDependencies": {
-    "@mdi/font": "^5.7.55",
-    "@nuxt/types": "^2.14.7",
-    "@nuxt/typescript-build": "^2.0.3",
+    "@mdi/font": "^5.9.55",
+    "@nuxt/types": "^2.15.6",
+    "@nuxt/typescript-build": "^2.1.0",
     "@nuxtjs/eslint-config-typescript": "^3.0.0",
     "@nuxtjs/stylelint-module": "^4.0.0",
-    "@types/jest": "^26.0.14",
-    "@vue/test-utils": "^1.1.0",
+    "@types/jest": "^26.0.23",
+    "@vue/test-utils": "^1.2.0",
     "babel-core": "^6.26.3",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.5.2",
+    "babel-jest": "^26.6.3",
     "cpx": "^1.5.0",
-    "eslint": "^7.11.0",
-    "eslint-config-prettier": "^6.12.0",
+    "eslint": "^7.26.0",
+    "eslint-config-prettier": "^6.15.0",
     "eslint-loader": "^4.0.2",
     "eslint-plugin-nuxt": "^1.0.0",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-tsdoc": "^0.2.7",
-    "husky": "^4.3.0",
-    "jest": "^26.5.3",
-    "lint-staged": "^10.4.0",
-    "node-sass": "^4.14.1",
-    "nodemon": "^2.0.5",
-    "prettier": "^2.1.2",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-tsdoc": "^0.2.14",
+    "fibers": "^5.0.0",
+    "husky": "^4.3.8",
+    "jest": "^26.6.3",
+    "lint-staged": "^10.5.4",
+    "nodemon": "^2.0.7",
+    "prettier": "^2.3.0",
     "rimraf": "^3.0.2",
-    "sass-loader": "^10.0.3",
-    "stylelint": "^13.7.2",
+    "sass": "^1.32.13",
+    "sass-loader": "10.1.1",
+    "stylelint": "^13.13.1",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^20.0.0",
-    "stylelint-scss": "^3.18.0",
-    "ts-jest": "^26.4.1",
-    "ts-loader": "^8.0.5",
+    "stylelint-scss": "^3.19.0",
+    "ts-jest": "^26.5.6",
+    "ts-loader": "^8.2.0",
+    "typescript": "4.0.5",
     "vue": "^2.6.12",
     "vue-jest": "^3.0.7",
     "vue-server-renderer": "^2.6.12",

src/components/AppLanguageSelector.vue

@@ -26,6 +26,7 @@ export default Vue.extend({
       return { locales: [{ text: 'N/A', value: '' }] }
 
     return {
+      // @ts-ignore
       locales: this.$root.$i18n.locales.map((l) => {
         if (typeof l === 'string') return { text: l, value: l }
         else return { text: l.displayName, value: l.code }

src/components/LessonSummaryCard.vue

@@ -95,10 +95,7 @@ export default Vue.extend({
   flex-direction: column;
   flex: 0 1 auto;
   margin-left: 12px;
-
-  .ContentCard-Button {
-    margin-bottom: 12px;
-  }
+  justify-content: space-around;
 }
 
 .ContentCard {

src/components/PeriodSection.vue

@@ -55,7 +55,7 @@ export default Vue.extend({
   computed: {
     maxEndTime() {
       const endTimeArray = this.classData.map((value) => dayjs(value.endTime))
-      return dayjs.max(...endTimeArray)
+      return dayjs.max(endTimeArray)
     },
   },
   methods: {
@@ -72,6 +72,7 @@ export default Vue.extend({
   border-bottom: 1px solid $color-base-color-02;
   padding-bottom: 12px;
   margin-bottom: 12px;
+  align-items: center;
 
   &:last-child {
     border: none;