vue2+lessの使い方を詳しく解説-jsチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-05-08 14:27:30

オリジナル

1451 人が閲覧しました

今回は、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 サイトの他の関連記事を参照してください。