vue2でlessを使う手順を詳しく解説

今回は、vue2でlessを使用する手順について詳しく説明します。vue2で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

Steps

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

インストールが成功したら、vue コンポーネントで Less が使用されます

（或者
@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>
)

補足:

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タグにscopedを追加するという意味です)。この範囲では有効です)🎜rrreee🎜 この記事の事例を読んだ後は、この方法を習得したことになります。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 🎜🎜推奨読書: 🎜🎜🎜JSの左リストを右に転送🎜🎜🎜🎜JSのタイムシェアリング関数の分析🎜🎜🎜🎜🎜 jsが配列パラメータをコントローラーに渡す手順の詳細な説明🎜🎜🎜

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