質問

Nuxtjsでvuetifyを使用するとエラーが多発します。 Using / for division is deprecated and will be removed in Dart Sass 2.0.0. yarnの開発中に

Nuxtjs: v2.15.6 nuxtjs/vuetify": "1.11.3", "sass": "1.32.8", "sass-loader": "10.2.0" です。

誰かそれを修正する方法を知っていますか？

: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($grid-gutter, 3)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
63 │     'md': $grid-gutter / 3,
   │           ^^^^^^^^^^^^^^^^
   ╵
    node_modules/vuetify/src/styles/settings/_variables.scss 63:11  @import
    node_modules/vuetify/src/styles/settings/_index.sass 1:9        @import
    node_modules/vuetify/src/styles/styles.sass 2:9                 @import
    node_modules/vuetify/src/components/VIcon/_variables.scss 1:9   @import
    node_modules/vuetify/src/components/VIcon/VIcon.sass 2:9        root stylesheet

: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($grid-gutter * 2, 3)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
64 │     'lg': $grid-gutter * 2/3,
   │           ^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/vuetify/src/styles/settings/_variables.scss 64:11  @import
    node_modules/vuetify/src/styles/settings/_index.sass 1:9        @import
    node_modules/vuetify/src/styles/styles.sass 2:9                 @import
    node_modules/vuetify/src/components/VIcon/_variables.scss 1:9   @import
    node_modules/vuetify/src/components/VIcon/VIcon.sass 2:9        root stylesheet

"dependencies": {
    "@nuxtjs/apollo": "^4.0.1-rc.5",
    "@nuxtjs/auth-next": "5.0.0-1617968180.f699074",
    "@nuxtjs/axios": "^5.4.1",
    "@nuxtjs/gtm": "^2.3.0",
    "axios-extensions": "^3.0.6",
    "global": "^4.4.0",
    "googleapis": "^71.0.0",
    "graphql-tag": "^2.10.3",
    "jszip": "^3.2.1",
    "jwt-decode": "^3.1.2",
    "leaflet": "1.6.0",
    "leaflet-draw": "^1.0.4",
    "leaflet-editablecirclemarker": "^1.0.4",
    "leaflet-geosearch": "2.5.1",
    "leaflet.gridlayer.googlemutant": "0.9.0",
    "leaflet.heat": "^0.2.0",
    "lodash": "^4.17.15",
    "lodash-webpack-plugin": "^0.11.5",
    "lru-cache": "^6.0.0",
    "multi-download": "^3.0.0",
    "nuxt": "^2.6.3",
    "nuxt-i18n": "^6.20.1",
    "nuxt-leaflet": "^0.0.21",
    "reiko-parser": "^1.0.8",
    "sass": "1.32.8",
    "sass-loader": "10.2.0",
    "sortablejs": "1.13.0",
    "style": "^0.0.3",
    "style-loader": "^2.0.0",
    "svgo": "^2.3.0",
    "vue": "^2.6.6",
    "vue-mqtt": "^2.0.3",
    "vue-recaptcha": "^1.1.1",
    "vue-upload-component": "^2.8.19",
    "vuedraggable": "willhoyle/Vue.Draggable"
  },
  "devDependencies": {
    "@aceforth/nuxt-optimized-images": "^1.0.1",
    "@babel/preset-env": "^7.13.15",
    "@babel/runtime-corejs3": "^7.13.10",
    "@mdi/font": "^5.9.55",
    "@nuxtjs/eslint-config": "^6.0.0",
    "@nuxtjs/vuetify": "^1.11.3",
    "@storybook/addon-essentials": "^6.2.8",
    "@storybook/vue": "^6.2",
    "@vue/cli-plugin-eslint": "^4.5.12",
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.6",
    "babel-plugin-lodash": "^3.3.4",
    "babel-plugin-transform-pug-html": "^0.1.3",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-vue": "^2.0.2",
    "core-js": "3",
    "css-loader": "^5.2.1",
    "eslint": "^7.24.0",
    "eslint-config-prettier": "^8.2.0",
    "eslint-config-standard": "^16.0.2",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-html": "^6.1.2",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-promise": "^5.1.0",
    "eslint-plugin-standard": "^5.0.0",
    "eslint-plugin-vue": "^7.9.0",
    "googleapis": "^71.0.0",
    "image-webpack-loader": "^7.0.1",
    "imagemin-mozjpeg": "^9.0.0",
    "imagemin-pngquant": "^9.0.2",
    "minify-css-string": "^1.0.0",
    "plop": "^2.4.0",
    "prettier": "^2.2.1",
    "sass-migrator": "^1.3.9",
    "storybook": "^6.2.8",
    "storybook-readme": "^5.0.9",
    "stylus": "^0.54.8",
    "stylus-loader": "^4.0.0",
    "vue-loader": "^15.9.6",
    "vue-recaptcha": "^1.1.1",
    "vue-template-compiler": "^2.6.6",
    "vue2-leaflet": "2.5.2",
    "vue2-leaflet-editablecirclemarker": "^1.0.5",
    "vue2-leaflet-geosearch": "1.0.6",
    "vue2-leaflet-googlemutant": "^2.0.0",
    "vue2-leaflet-markercluster": "^3.1.0",
    "vuetify-loader": "^1.7.2"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "ie 11"
    ]
  }
}

どのように解決するのですか？

クイックフィックス

チルダを使用するように sass のバージョンを変更します。 ~ に変更すれば、動作するはずです。これは、更新されたマイナーバージョンを禁止し、パッチのみを許可するようにするためです。

package.jsonの行の例です。

"sass": "~1.32.6"

参照 https://nodesource.com/blog/semver-tilde-and-caret/

将来互換性のある修正

をリファクタリングして使いたい人のために。 / の使用をリファクタリングしたい場合は style-resources モジュール . それを使って、一度 '@nuxtjs/style-resources' をNuxtの設定に追加します。 buildModules を設定すると hoistUseStatements: true の中に styleResources プロパティを設定します。こうすることで @use 'sass:math'; を変更するスタイルブロックの中で a/b を math.div(a, b)