vue-cliイニシャル項目でlessを使う方法

何がlessですか
LessはCSS前処理言語であり、CSS言語を拡張し、変数、Mixin、関数などの特性を追加し、CSSをより維持し、拡張しやすくしています。
ことばを引く
フロントエンドのvueフレームがますますブームになりました。vue-cliはvueプロジェクトの足場ツールとして、開発の中で一番よく使われています。vueプロジェクトの中で私達のcssファイルをよりよく管理するために、私達は通常lessまたはsassを導入して私達のcssコードを管理するように手伝います。では、本文はどのようにしてvue-cli初期化のプロジェクトにlessを使ってcssコードの管理を助けてくれるかを記録することを目的としています。
下の話は多くなくなりました。小編と一緒に詳しく紹介してみましょう。
方法は以下の通りです
まず、lessをインストールします。タオバオミラーを使ってインストールすることをオススメします。

cnpm install less less-loader --save

その後、プロファイルを変更します。buildフォルダを開きます。webpack.base.com nf.jsを見つけて、設定コードを入力します。

module.exports = {
 ……
 module: {  
  rules: [
   ……
   // rules               
   {
    test: /\.less$/,
    loader: "style-loader!css-loader!less-loader"
   }  
  ]}

最後にあなたのstyleタグにlang="less"を追加し、scopedはプライベートスコープを表します。

<style scoped lang="less">
 /*
  *             less   
  */
</style>

締め括りをつける
以上はこの文章の全部の内容です。本文の内容は皆さんの学習や仕事に対して一定の参考となる学習価値を持っています。質問があれば、メッセージを書いて交流してください。ありがとうございます。