Nuxtjs는 '분할을 위해 / 를 많이 던지는 것은 더 이상 사용되지 않으며 다트 사스 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
"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"
]
}
}
퀵 픽스
tilde를 사용하도록 sass 버전 변경~잘 될 거야업데이트된 부 버전 사용을 금지하고 패치만 허용하기 때문이다.
예제 패키지.json 선:
"sass": "~1.32.6"
https://nodesource.com/blog/semver-tilde-and-caret/을 참조하십시오.
미래 호환 수정
의 사용을 리팩터링하고자 하는 분들을 위해/스타일에 맞는 모듈을 구해야 한다.한 번 더 추가하면'@nuxtjs/style-resources'Nuxt 구성에 연결buildModules, 설정할 수 있다.hoistUseStatements: true의styleResources구성의 속성.이렇게 하면 할 수 있을 것이다.@use 'sass:math';당신이 바꿀 스타일 블록에a/b로math.div(a, b)
내 생각에 시력에 문제가 있는 것 같아.하지만 실을 사용한다면
"resolutions": {
"@nuxtjs/vuetify/**/sass": "1.32.12"
}
에package.json.
편집
npm을 사용하면 간단히 추가할 수 있다.
"devDependencies": {
...,
"sass": "~1.32.12"
}
로package.json
여기서의 다른 답변과는 달리, 나는 이 "오류"도 긍정적으로 볼 수 있고, 다음에 따라 행동할 수 있다고 말하고 싶다.
이 페이지로 이동한다: https://sass-lang.com/documentation/breaking-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
페이지 끝에는 "자동" 마이그레이션 솔루션이 제공되며
$ npm install -g sass-migrator
$ sass-migrator division **/*.scss
전반적으로 이 모든 것이 매우 타당하게 들리므로 개발자들은 "양탄자 아래 숨기기" 접근법 대신 기존의 모든 코드를 수정하는 것을 심각하게 고려해야 한다.
패키지의 devDependencies에 이 줄을 추가하십시오.json
"sass": "~1.32.12"
node_node 폴더 및 package-lock.json 삭제, 실행
$ npm install
이 원인은 많은 프런트엔드 프레임워크에서 발생했다. 나는 개인적으로@nuxtjs/vuetify그리고 최근 이틀 전에 나는 이 문제에 직면했다. 당신이 확인할 첨부된 이미지를 볼 수 있다.
아래 단계 확인해서 확인할 수 있는 1줄로 수정했어.필요에 따라 창 또는 Linux를 선택하십시오.
Windows 10(localhost) 단계:
- node_module 제거
rm -r .\node_modules\ - package-lock.json 제거
rm -r .\package-lock.json - 한 줄 추가
"sass": "1.32.13"꾸러미로의 밑에 깔리다.devDependencies단면도
Linux(Production) 단계:
- node_module 제거
rm -R node_modules - package-lock.json 제거
rm -R package-lock.json - 한 줄 추가
"sass": "1.32.13"꾸러미로의 밑에 깔리다.devDependencies단면도
마지막으로, 그 증거는 아래에 첨부되어 있다.
한 번 기억하라nuxtjs/vuetify이 sass 버전의 패치를 릴리스하고 패키지를 업데이트하십시오.json sass 최신판.
나는 가지고 있지 않았다.sass내 자신이 의존하는 존재로서, 그래서 나는 출마를 결심했고 이 문제는 사라졌으므로, 이것은 이미 그에 의해 고쳐졌을지도 모른다.nuxt(2.15.7) 또는@nuxtjs/vuetify(1.12.1).
설치했다@nuxtjs/vuetify버전 ^1.0.0과 함께 실이나 npm이 어떤 버전을 선택할지 결정하도록 했고, 그 후에는 더 이상 이 문제가 없다.
설치하려면 다음을 입력하십시오.
yarn add @nuxtjs/vuetify@^1.0.0 -D
또는 npm을 통해
npm i @nuxtjs/vuetify@^1.0.0 --save-dev
sass-migrator를 사용한 빠른 수정: https://github.com/sass/migrator
npx를 사용하여 실행:
npx sass-migrator division **/*.scss
나는 소포에서 ^를 제거하여 고쳤다.json
이전
sass": "^1.32.12
그것을 애프터(After)로 바꾸다.
"sass": "1.32.12"
npm 설치 후 laravel 혼합으로 prod를 실행한다.
'programing' 카테고리의 다른 글
| 라우터 v4 모달 반응 (0) | 2022.03.11 |
|---|---|
| 레이아웃 페이지 또는 페이지당 여러 구성 요소와 함께 반응 라우터 사용 (0) | 2022.03.11 |
| 어떻게 분단을 부동의 지점으로 강제할 수 있을까?0으로 반올림하는 중인가? (0) | 2022.03.11 |
| 반응-축소 사용선택자 형식 상태 유형 (0) | 2022.03.11 |
| Vuetify에서 v-card 구성 요소의 중앙에 콘텐츠를 맞추는 방법 (0) | 2022.03.11 |