Node、node-sass、sass-loaderのバージョン互換性の問題

目次

scssエラー

を使用

現在のnode-sass、sass-loaderバージョン

テスト

ステップ1

ステップ2

ソリューション

node-sass問題を解決する

nodeとnode-sassバージョンの関係

この文章は主にnode、node-sass、sass-loaderの3つが引き起こした互換性の問題を書く.
scssでエラーを報告する
なぜこの文章を書くのか、最新版sassのインストールが間違っています.ナニー、最新版は互換性がない以上.
エラーメッセージを見てみましょう

 ERROR  Failed to compile with 1 error                                                                                                   11:02:54

 error  in ./src/components/ANew.vue?vue&type=style&index=0&id=039d1e2f&lang=scss&scoped=true

Syntax Error: TypeError: this.getOptions is not a function


 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader-v16/dist/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/ANew.vue?vue&type=style&index=0&id=039d1e2f&lang=scss&scoped=true 4:14-450 14:3-18:5 15:22-458
 @ ./src/components/ANew.vue?vue&type=style&index=0&id=039d1e2f&lang=scss&scoped=true
 @ ./src/components/ANew.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.10.32:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

ネット上で多くの資料を探してnode-sassとsass-loaderバージョンに問題があると言っています
現在のnode-sass、sass-loaderバージョン

"node-sass": "^5.0.0",
"sass-loader": "^11.0.1",

ネット上の資料はどうせこの2つのバージョンの問題であることを確定することができて、解決方法を見つけることができて、しかしそれを知っていますが、その理由を知りません.
ネットで良いバージョンが見つかりましたが、これは私が望んでいるものではありません.

sass-loader 4.1.1，node-sass 4.3.0
sass-loader 7.0.3，node-sass 4.7.2
sass-loader 7.3.1，node-sass 4.7.2

テスト
ステップ1
資料に基づいてsass-loaderバージョンを更新

npm uninstall sass-loader
npm install [email protected]

"node-sass": "^5.0.0",
"sass-loader": "^7.3.1",

実行結果
WARN A new version of sass-loader is available. Please upgrade for best experience. Syntax Error: Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.
1警告、1エラー

 INFO  Starting development server...
 WARN  A new version of sass-loader is available. Please upgrade for best experience.
98% after emitting CopyPlugin

 ERROR  Failed to compile with 1 error                                                                                                   11:18:29

 error  in ./src/components/ANew.vue?vue&type=style&index=0&id=039d1e2f&lang=scss&scoped=true

Syntax Error: Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.


 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader-v16/dist/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/ANew.vue?vue&type=style&index=0&id=039d1e2f&lang=scss&scoped=true 4:14-450 14:3-18:5 15:22-458
 @ ./src/components/ANew.vue?vue&type=style&index=0&id=039d1e2f&lang=scss&scoped=true
 @ ./src/components/ANew.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.10.32:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

ステップ2
Syntax Error: Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.
ヒントに従ってnode-sassを^4.0に下げる.バージョン0

npm uninstall node-sass
npm install [email protected]

???どうして私のは駄目で、报い间违いました!!!node-sassのインストールに失敗しましたなぜですか??
ソリューション
本文に必要な条件はすべて現れた.
Node-sassインストールエラーsass-loaderドロップダウンバージョン、プロンプト、更新版.
Node-sass問題の解決
node-sassエラーはやはり比較的よくある新しい会社に行って、npm installはnode-sassエラーを実行します.隣の何人かの同僚に聞いて、普通だと言って、nodeの問題だと言った.要求に応じてnode 12をインストールしてみました.
プロジェクトは正常に実行できますが、プロジェクトでは奇妙なバグが発生します.なぜですか.
この問題は私は説明しません.もし同級生が出会ったら、なぜかと聞いています.私は直接本題に入ります.
Nodeとnode-sassバージョンの関係
npmの上でnode-sassを打ってnodeの対応するnode-sassバージョンを探し当てます
NodeJS
Supported node-sass version
Node Module
Node 15
5.0+
88
Node 14
4.14+
83
Node 13
4.13+, <5.0
79
Node 12
4.12+
72
Node 11
4.10+, <5.0
67
Node 10
4.9+
64
Node 8
4.5.3+, <5.0
57
Node <8
<5.0
<57
独自のnodeバージョンを表示

node -v

v14.11.0

nodeバージョンに従って対応するnode-sassバージョンをインストール

npm uninstall node-sass
npm install [email protected]

実行結果はsass-loaderに更新バージョンがあることを示します.
WARN A new version of sass-loader is available. Please upgrade for best experience.

 INFO  Starting development server...
 WARN  A new version of sass-loader is available. Please upgrade for best experience.
98% after emitting CopyPlugin

 DONE  Compiled successfully in 2927ms  

sass-loader^11.0以上の最新バージョンのインストール
大バージョンによるインストール、node-sass@4..サポートsass-loader@10..

npm uninstall sass-loader
npm install [email protected]

 ERROR  Failed to compile with 1 error                                                                                                    7:36:22

 error  in ./src/components/ANew.vue?vue&type=style&index=0&id=039d1e2f&lang=scss&scoped=true

Syntax Error: Error: PostCSS received undefined instead of CSS string
    at runMicrotasks (<anonymous>)

"node-sass": "^4.14.1",
"sass-loader": "^10.1.1",

未完待续..