vue プロジェクトで scss を使用したかったのですが、時間がかかりました。多くの問題に遭遇し、ロールバックを経験しました。そしてすべてのインストールパッケージを削除します。アンインストールして、別のバージョンに置き換えます。。。。。。。。
では、正しましょう。
従来の操作方法: (この方法は間違っています。飛ばしても大丈夫です。正しい方法は最後にあります! )
1. インストール:
暖かい注意: 以前に情報を読んだ後、混乱していました。ここでは、node-sass と sass-loader のみをインストールする必要があります。私の vue プロジェクトにはデフォルトで vue-style-loader がすでにインストールされているため、不必要なことは行わないでください。バージョンの競合を避けるため。そうなるとさらに多くの問題が発生します。
注: この直接インストールでは、バージョンの競合が発生する可能性があります。記事の最後にある対応するバージョン番号を直接インストールできます。時間を節約する！
npm install node-sass --save-dev //node-sass をインストール
npm install sass-loader --save-dev //sass-loader をインストール
2. 構成:
webpack.base.conf.js が見つかりませんか? ビルドフォルダー内にあります
webpack.base.conf.js ファイルの下の構成ルール
rules:[
...
{ //このセクションはデフォルトです。変えないで！以下に手動で追加する必要があるものは何もありません。これは scss!
test: /\.scss?$/、loaders
: ["style", "css", "sass"] } を
コンパイルして認識するのと同じです。
穴が現れた
ここにインストールした後、使用を開始するとエラーが発生します。
このエラーは次のように報告されます。
モジュールのビルドに失敗しました: TypeError: this.getOptions は関数ではありません
オンラインでは、sass-loader によってインストールされたバージョンが高すぎると言われています。アンインストールして、低いバージョンを再インストールしてください。インターネット上のほとんどの人はバージョン 7 をインストールしています。私は 7.3.1 をインストールしました。
正しい操作方法：
1. まず、以前の sass-loader バージョンを [アンインストール] します (以前にインストールされていた場合)。
npmアンインストールsass-loader
2. 次に、バージョン 7.3.1 を [再インストール] します。
npm install [email protected] --save-dev
3. [また新たなエラー]
インストール後、問題は解決しました。別の新しいエラーが発生します。
エラー: Node Sass バージョン 5.0.0 は ^4.0.0 と互換性がありません。
4. 【最終解決？】
このエラーは sass-loader から発生します。node-sass@latest は v5.0.0 であり、sass-loader は^4.0.0 を期待しているためです。
現在の解決策は次のとおりです。
4.1 node-sass のアンインストール
npm uninstall ノード-sass -D
4.2 をインストールしてから、最新バージョンをインストールします (5.0 より前のバージョンでも問題ありません)。
親切なヒント:
1. --save-dev は -D と同等です。
2. -D とバージョン番号を先頭に記述する必要があります。
cnpm install -D [email protected]
これで完了です。
エラーがまだ報告されている場合は、プロジェクトを再開します。それでおしまい！
エラー: Node Sass バージョン 5.0.0 は ^4.0.0 と互換性がありません 問題解決_Abinhere のブログ-CSDN ブログ
Vue_m0_37605642 のブログでの scss のインストールと使用 - CSDN ブログ
vue に SCSS をインストールする project_Qingyang のブログ - CSDN blog_vue install scss