Nuxtjs vuetify 抛出大量`Using / for Division 已弃用，将在 Dart Sass 2.0.0 中删除。`

Question

Nuxtjs vuetify 抛出大量`Using / for Division 已弃用，将在 Dart Sass 2.0.0 中删除。`

使用 vuetify 的 NuxtjsUsing / for division is deprecated and will be removed in Dart Sass 2.0.0.在纱线开发期间抛出大量错误

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

Run Code Online (Sandbox Code Playgroud)

"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"
    ]
  }
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Jon*_*han 33

快速解决

更改您的 sass 版本以使用波浪号~，它应该可以工作。这是因为它将禁止使用更新的次要版本，并且只允许使用补丁。

示例 package.json 行：

"sass": "~1.32.6"

Run Code Online (Sandbox Code Playgroud)

见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)

Answer 2

Man*_*adi 29

我认为 vuetify 有问题。但是如果你使用纱线，你可以使用

"resolutions": {
    "@nuxtjs/vuetify/**/sass": "1.32.12"
}

Run Code Online (Sandbox Code Playgroud)

在package.json。

编辑

如果你使用 npm，你可以简单地添加

"devDependencies": {
    ...,
    "sass": "~1.32.12"
}

Run Code Online (Sandbox Code Playgroud)

到 package.json

Answer 3

vsy*_*ync 10

与这里的其他答案相反，我想说明这个“错误”也可以被积极地看待并采取行动：

它指向这个页面：https : //sass-lang.com/documentation/break-changes/slash-div

这只是解释了sass迄今为止的工作方式并不好，从现在开始它要求“更好地我们的方式”：

Sass 目前在某些上下文中将 / 视为除法运算，而在其他上下文中将 / 视为分隔符。这使得 Sass 用户很难分辨任何给定的 / 意味着什么，并且很难使用使用 / 作为分隔符的新 CSS 特性。

@use "sass:math";

// WRONG, will not work in future Sass versions.
@debug (12px/4px); // 3

// RIGHT, will work in future Sass versions.
@debug math.div(12px, 4px); // 3

Run Code Online (Sandbox Code Playgroud)

在该页面的末尾提供了一个“自动”迁移解决方案

@use "sass:math";

// WRONG, will not work in future Sass versions.
@debug (12px/4px); // 3

// RIGHT, will work in future Sass versions.
@debug math.div(12px, 4px); // 3

Run Code Online (Sandbox Code Playgroud)

总的来说，这整个事情听起来非常合理，开发人员应该认真考虑修复所有现有的代码，而不是“扫地出门”的方法。

这在开发依赖项中可能是合理的，但在这种情况下，我的 UI 框架依赖于 Sass，导致我的构建由于输出过多而中断。这不是我需要解决的问题，当然也不应该在次要版本更新后发生。 (3认同)
它破坏了不希望以看似无限循环的方式打印此消息的工具，例如在使用 Vuetify 时 - 它显然有_很多很多地方_使用了已弃用的划分样式。我并不是在这里反对 Sass，而是反对 Vuetify：他们应该使用更严格的 Sass 版本来防止此消息困扰下游开发人员。 (3认同)
@ruffin vsync 的答案可能是正确的，但这并不能改变_它没有解决这个特定问题_的事实。OP 显然是 Vuetify 的_用户_，而不是其贡献者之一。提供针对 Vuetify 贡献者的答案本身可能很有价值，但对 Vuetify 用户没有帮助。 (3认同)