vue2 でのlessの使用に関する簡単なチュートリアル-jsチュートリアル-php.cn

vue2 でのlessの使用に関する簡単なチュートリアル

亚连

リリース： 2018-05-28 17:03:16

オリジナル

2506 人が閲覧しました

この記事では主にvue2でlessを使用するための簡単なチュートリアルを紹介します。webpackを手動で設定する必要がないため、vueでlessを使用するのは非常に簡単です

まず最初に。 npm init webpack プロジェクト名を使用して作成されたプロジェクトの場合、webpack を手動で設定する必要はありませんnpm init webpack 项目名的方式创建的项目,无需手动配置webpack

所以再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开发环境已经安装成功

当所有东西都准备好之后：

第一步：

安装less依赖，npm install less less-loader --save

したがって、Vue でのlessの使用は非常に簡単です。lessをインストールするだけです。およびless-loader

手順

{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
},

ログイン後にコピー

インストールが成功したら、vueコンポーネントでlessを使用できます

（或者
@import &#39;./index.less&#39;; //引入全局less文件
）。
(
html中直接引入：
<link rel="stylesheet/less" type="text/css" href="文件路径/styles.less" rel="external nofollow" >
<script src="文件路径/less.js" type="text/javascript"></script>
)

ログイン後にコピー

追加:

vueでlessを使う方法

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

elementUIはvue2をベースにしています

vueでlessを使用しています

まず、vue開発環境がインストールされています成功しました

すべての準備ができたら:

ステップ 1 :

依存関係を減らしてインストールします。npm install less less-loader --save🎜🎜ステップ 2:🎜🎜 webpack.config.js ファイルを変更します。外部のlessをサポートするように依存関係をロードするようにローダーを設定し、元のコードに 🎜rrreee🎜 を追加します。これでインストールは基本的に完了します。次に、それを使用するときに、styleタグにlang="less"を追加してlessコードを記述します。 style タグにスコープを追加します。このスコープは有効です)🎜rrreee🎜上記は、皆さんのためにまとめたものです。今後皆さんのお役に立てれば幸いです。 🎜🎜関連記事: 🎜🎜🎜Djangoでjquery ajax postデータを使用するときの403エラーの解決策🎜🎜🎜🎜Djangoフレームワークでajax postメソッドを使用する方法🎜🎜🎜🎜JQuery ajaxがjsonを返すときに中国語の文字化けコードを解決する方法🎜🎜

以上がvue2 でのlessの使用に関する簡単なチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。