ホームページ >ウェブフロントエンド >jsチュートリアル >vue2+lessの使い方を詳しく解説
今回は、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
{ 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 サイトの他の関連記事に注目してください。 推奨読書:
以上がvue2+lessの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。