Un tutoriel simple sur l'utilisation de less dans vue2

Cet article présente principalement un tutoriel simple pour utiliser less dans vue2 Comme il n'est pas nécessaire de configurer manuellement webpack, utiliser less dans vue est très simple. Il vous suffit d'installer less et less-loadder et tout ira bien. 🎜>

Tout d'abord, laissez-moi vous expliquer que si le projet est créé en utilisant le nom du projet

, il n'est pas nécessaire de configurer manuellement le webpack npm init webpack

, donc utiliser less dans Vue est très simple. Il vous suffit d'installer de moins en moins-loader

Étapes

npm install less less-loader --save //将less和less-loader安装到开发依赖
npm run dev

Si l'installation réussit, vous pouvez utiliser less dans le composant vue

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

Supplément :

Comment utiliser moins dans vue

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

elementUI est basé sur vue2

utilisé dans vue less

Tout d'abord, l'environnement de développement vue a été installé avec succès

Quand tout est prêt :

Première étape :

Installer moins de dépendances,

npm install less less-loader --save

Étape 2 :

Modifier le fichier webpack.config.js, configurer le chargeur pour charger les dépendances, le laisser prendre en charge external less, ajoutez

Maintenant, l'installation est pratiquement terminée. Ensuite, lorsque vous l'utilisez, ajoutez lang="less" dans la balise de style et vous pouvez écrire le code pour moins (en ajoutant scoped). à la balise de style signifie qu'elle n'est valable que dans cette portée)

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

Ce qui précède est ce que j'ai compilé pour vous, j'espère qu'il vous sera utile à l'avenir.

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

Articles connexes :

Solution à l'erreur 403 lors de l'utilisation des données de publication jquery ajax dans Django

Comment utiliser la publication ajax dans le framework Django Méthode

Comment résoudre le problème des caractères chinois tronqués lorsque JQuery ajax renvoie json

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!