Nuxtjs vuetify 抛出了很多“使用/用于除法”的提议，并将在 Dart Sass 2.0.0中删除

Nuxtjs 使用 vuetify 在纱线开发过程中抛出大量错误 Using / 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



"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"
]
}
}
30341 次浏览
小开

There's an issue with vuetify I think. But if you use yarn, you can use

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

in package.json.

EDIT

If you use npm, you can just simply add

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

to package.json

小开
最佳答案

Quick fix

Change your sass version to use the tilde ~ and it should work. This is because it will prohibit updated minor versions from being used, and allow only patches.

Example package.json line:

"sass": "~1.32.6"

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

Future-compatible fix

For those of you who want to refactor your use of /, you need to get the style-resources module. With it, once adding '@nuxtjs/style-resources' to your Nuxt config buildModules, you can set hoistUseStatements: true in a styleResources property in the config. This will allow you to @use 'sass:math'; in your style block where you will change a/b to math.div(a, b)

小开

This cause happened with many frontend frameworks, I personally use @nuxtjs/vuetify, and recently two days ago I faced this same problem you can see attached image to verify.

your-actual-error-image

I fixed it with 1 line you can check the below steps to verify. Choose your steps according to your needs either windows or linux.

Windows 10 (localhost) steps:

  1. Remove node_modules rm -r .\node_modules\
  2. Remove package-lock.json rm -r .\package-lock.json
  3. Add one line "sass": "1.32.13" into package.json under devDependencies section.

Linux (Production) steps:

  1. Remove node_modules rm -R node_modules
  2. Remove package-lock.json rm -R package-lock.json
  3. Add one line "sass": "1.32.13" into package.json under devDependencies section.

change-package.json-file

Finally, the proof is attached below

Remember once nuxtjs/vuetify they release the patch of this sass version, update your package.json sass to the latest version.

working-image-solution

小开

Add this line to the devDependencies in package.json

"sass": "~1.32.12"

delete node_modules folder and package-lock.json, the run

$ npm install
小开

Contrary to other answers here, I would like to state that this "error" can also be viewed positively and be acted upon:

It directs to this page: https://sass-lang.com/documentation/breaking-changes/slash-div

Which simply explains that the way sass worked until now was not good and from now on it asks up to "better our ways":

Sass currently treats / as a division operation in some contexts and a separator in others. This makes it difficult for Sass users to tell what any given / will mean, and makes it hard to work with new CSS features that use / as a separator.

@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

And at the end of that page is offered an "automatic" migration solution

$ npm install -g sass-migrator
$ sass-migrator division **/*.scss

Overall this whole thing sounds very reasonable and developers should seriously consider fixing all their existing code instead of "sweep under the rug" approach.

小开

I did not have sass as a dependency myself, so I decided to run npm update and this issue disappeared, so this might have been fixed already by nuxt (2.15.7) or @nuxtjs/vuetify(1.12.1).

小开

I've installed @nuxtjs/vuetify with version ^1.0.0 and I've let yarn or npm decide which version to pick, after that I no longer have this issue.

If you want to install it simply write:

yarn add @nuxtjs/vuetify@^1.0.0 -D

or via npm

npm i @nuxtjs/vuetify@^1.0.0 --save-dev
小开

I fixed it by removing ^, from my package.json

Before

sass": "^1.32.12

change it to After

"sass": "1.32.12"

and npm install and then npm run prod with laravel mix.

小开

Quick Fix using sass-migrator: https://github.com/sass/migrator

Use npx to run it:

npx sass-migrator division **/*.scss

提交答案