Vueでlessを使用する問題を解決する

1. less依存関係をインストールします: npm install less less-loader --save

2. webpack.base.config.jsファイルを修正し、依存関係をロードするようにローダーを設定し、外部lessをサポートするようにして、元のコードに追加します。

// このメソッドはコンソールにスタイルタグのスタイルを表示します { 
    テスト: /\.less$/,

    ローダー: "style-loader!css-loader!less-loader",
　
   options: { sourceMap: true } //現在のタグスタイルがどの less ファイルから取得されるかをコンソールで確認できます} 

3. プロジェクトでの使用

Vueファイルのスタイルタグにlang="less"を追加してタグ内でlessを使用するか、lessを外部的にインポートします。

発生した問題:

原因: インストールされている less-loader のバージョンが高すぎます。解決策:

1.npm で less-loader をアンインストールします 2.npm で [email protected] をインストールします

または、package.jsonファイルのバージョン番号を変更してnpm installを実行します。

これで、vue での less の使用に関するこの記事は終了です。vue less の使用に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。