ホームページ  >  記事  >  ウェブフロントエンド  >  vue2+lessの使い方を詳しく解説

vue2+lessの使い方を詳しく解説

php中世界最好的语言
php中世界最好的语言オリジナル
2018-05-08 14:27:301414ブラウズ

今回は、vue2+less の使用方法について詳しく説明します。vue2+less を使用する際の 注意事項 は何ですか?実際の事例を見てみましょう。

vue でのlessの使用は非常に簡単です。必要なのは、

インストールless、less-loader

手順

npm install less less-loader --save //将less和less-loader安装到开发依赖
npm run dev
インストールが成功したら、vueコンポーネントでlessを使用できるようになります

<style lang="less" scoped>
 .hello{
  a{
   color:red;
  }
 }

補足:

vueでlessを使用する方法

http://element.eleme.io/ //

elementUIはvue2に基づいています

vueでlessを使用する

まず、vue開発環境が正常にインストールされました

すべてが完了したら:

ステップ 1:

依存関係を減らしてインストールします。

npm install less less-loader --save

ステップ 2:

webpack.config.js ファイルを変更し、依存関係をロードするようにローダーを構成して、外部のlessをサポートするようにします。 , 元のコードに

{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
},
を追加 これで、インストールは大体完了したので、使用する際は、style タグに lang="less" を追加して、記述するコードを減らします(style タグにscopedを追加すると、この中でのみ有効になることを意味します)スコープ)

(或者
@import './index.less'; //引入全局less文件
)。
(
html中直接引入:
<link rel="stylesheet/less" type="text/css" href="文件路径/styles.less" rel="external nofollow" >
<script src="文件路径/less.js" type="text/javascript"></script>
)
この記事の事例を読んだ後、あなたはその方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JSは左右のリストを交換する機能を実装します

アプレット共有ページで前のページに戻る手順の詳細な説明

以上がvue2+lessの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。