Nuxtjs vuetify 抛出大量`Using / for division is deprecated and will be removed in Dart Sass 2.0.0.`
Nuxtjs vuetify throwing lots of `Using / for division is deprecated and will be removed in Dart Sass 2.0.0.`
使用 vuetify 的 Nuxtjs 在 yarn dev
期间抛出大量错误 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-装载机”：“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"
]
}
}
我认为 vuetify 有问题。
但是如果你使用yarn，你可以使用
"resolutions": {
"@nuxtjs/vuetify/**/sass": "1.32.12"
}
在 package.json.
编辑
如果你使用npm，你可以简单地添加
"devDependencies": {
...,
"sass": "~1.32.12"
}
到package.json
快速修复
更改您的 sass 版本以使用波浪号 ~，它应该可以工作。这是因为它将禁止使用更新的次要版本，并且只允许使用补丁。
示例 package.json 行：
"sass": "~1.32.6"
见https://nodesource.com/blog/semver-tilde-and-caret/
未来兼容的修复
对于那些想要重构 / 使用的人，您需要获取 style-resources module。有了它，一旦将 '@nuxtjs/style-resources' 添加到您的 Nuxt 配置 buildModules，您就可以在配置中的 styleResources 属性 中设置 hoistUseStatements: true。这将允许您在样式块中 @use 'sass:math'; 将 a/b 更改为 math.div(a, b)
这个问题出现在很多前端框架上，我个人使用@nuxtjs/vuetify，最近两天前我遇到了同样的问题你可以看附图来验证。
我用 1 行修复了它，您可以检查以下步骤来验证。根据您的需要选择步骤 windows 或 linux。
Windows 10（本地主机）步骤：
- 删除node_modules
rm -r .\node_modules\
- 删除包-lock.json
rm -r .\package-lock.json
- 在
devDependencies 部分下的 package.json 中添加一行 "sass": "1.32.13"。
Linux（制作）步骤：
- 删除node_modules
rm -R node_modules
- 删除包-lock.json
rm -R package-lock.json
- 在
devDependencies 部分下的 package.json 中添加一行 "sass": "1.32.13"。
最后附上证明
记得有一次nuxtjs/vuetify他们发布了这个sass版本的补丁，把你的package.jsonsass更新到最新版本
将此行添加到 package.json
中的 devDependencies
"sass": "~1.32.12"
删除node_modules文件夹和package-lock.json,运行
$ npm install
与这里的其他答案相反，我想声明这个“错误”也可以被积极看待并采取行动：
它指向这个页面：
https://sass-lang.com/documentation/breaking-changes/slash-div
这简单地解释了 sass 到目前为止的工作方式是 不 好，从现在开始它要求最多“改善我们的方式”：
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
并且在该页面的末尾提供了 "automatic" migration solution
$ npm install -g sass-migrator
$ sass-migrator division **/*.scss
总的来说，这一切听起来很合理，开发人员应该认真考虑修复所有现有代码，而不是“扫一扫” 方法。
我自己没有 sass 作为依赖项，所以我决定 运行 npm update 然后这个问题就消失了，所以这个nuxt (2.15.7) 或 @nuxtjs/vuetify(1.12.1) 可能已经修复。
我已经安装了 @nuxtjs/vuetify 版本 ^1.0.0 并且让 yarn 或 npm 决定选择哪个版本，之后我不再有这个问题。
如果你想安装它，只需写：
yarn add @nuxtjs/vuetify@^1.0.0 -D
或通过 npm
npm i @nuxtjs/vuetify@^1.0.0 --save-dev
我通过从 package.json
中删除 ^, 来修复它
之前
sass": "^1.32.12
改成
之后
"sass": "1.32.12"
和 npm 安装然后 npm 运行 prod 与 laravel 混合。
使用 sass-migrator 快速修复：https://github.com/sass/migrator
使用 npx 来 运行 它：
npx sass-migrator division **/*.scss
使用 vuetify 的 Nuxtjs 在 yarn dev
期间抛出大量错误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-装载机”：“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"
]
}
}
我认为 vuetify 有问题。 但是如果你使用yarn，你可以使用
"resolutions": {
"@nuxtjs/vuetify/**/sass": "1.32.12"
}
在 package.json.
编辑
如果你使用npm，你可以简单地添加
"devDependencies": {
...,
"sass": "~1.32.12"
}
到package.json
快速修复
更改您的 sass 版本以使用波浪号 ~，它应该可以工作。这是因为它将禁止使用更新的次要版本，并且只允许使用补丁。
示例 package.json 行：
"sass": "~1.32.6"
见https://nodesource.com/blog/semver-tilde-and-caret/
未来兼容的修复
对于那些想要重构 / 使用的人，您需要获取 style-resources module。有了它，一旦将 '@nuxtjs/style-resources' 添加到您的 Nuxt 配置 buildModules，您就可以在配置中的 styleResources 属性 中设置 hoistUseStatements: true。这将允许您在样式块中 @use 'sass:math'; 将 a/b 更改为 math.div(a, b)
这个问题出现在很多前端框架上，我个人使用@nuxtjs/vuetify，最近两天前我遇到了同样的问题你可以看附图来验证。
我用 1 行修复了它，您可以检查以下步骤来验证。根据您的需要选择步骤 windows 或 linux。
Windows 10（本地主机）步骤：
- 删除node_modules
rm -r .\node_modules\ - 删除包-lock.json
rm -r .\package-lock.json - 在
devDependencies部分下的 package.json 中添加一行"sass": "1.32.13"。
Linux（制作）步骤：
- 删除node_modules
rm -R node_modules - 删除包-lock.json
rm -R package-lock.json - 在
devDependencies部分下的 package.json 中添加一行"sass": "1.32.13"。
最后附上证明
记得有一次nuxtjs/vuetify他们发布了这个sass版本的补丁，把你的package.jsonsass更新到最新版本
将此行添加到 package.json
中的 devDependencies"sass": "~1.32.12"
删除node_modules文件夹和package-lock.json,运行
$ npm install
与这里的其他答案相反，我想声明这个“错误”也可以被积极看待并采取行动：
它指向这个页面： https://sass-lang.com/documentation/breaking-changes/slash-div
这简单地解释了 sass 到目前为止的工作方式是 不 好，从现在开始它要求最多“改善我们的方式”：
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
并且在该页面的末尾提供了 "automatic" migration solution
$ npm install -g sass-migrator
$ sass-migrator division **/*.scss
总的来说，这一切听起来很合理，开发人员应该认真考虑修复所有现有代码，而不是“扫一扫” 方法。
我自己没有 sass 作为依赖项，所以我决定 运行 npm update 然后这个问题就消失了，所以这个nuxt (2.15.7) 或 @nuxtjs/vuetify(1.12.1) 可能已经修复。
我已经安装了 @nuxtjs/vuetify 版本 ^1.0.0 并且让 yarn 或 npm 决定选择哪个版本，之后我不再有这个问题。
如果你想安装它，只需写：
yarn add @nuxtjs/vuetify@^1.0.0 -D
或通过 npm
npm i @nuxtjs/vuetify@^1.0.0 --save-dev
我通过从 package.json
中删除 ^, 来修复它之前
sass": "^1.32.12
改成 之后
"sass": "1.32.12"
和 npm 安装然后 npm 运行 prod 与 laravel 混合。
使用 sass-migrator 快速修复：https://github.com/sass/migrator
使用 npx 来 运行 它：
npx sass-migrator division **/*.scss