Maison > interface Web > js tutoriel > le corps du texte

Un tutoriel simple sur l'utilisation de less dans vue2

亚连
Libérer: 2018-05-28 17:03:16
original
2488 Les gens l'ont consulté

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
Copier après la connexion
Si l'installation réussit, vous pouvez utiliser less dans le composant vue

<style lang="less" scoped>
 .hello{
  a{
   color:red;
  }
 }
Copier après la connexion

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

< au code d'origine 🎜>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",
},
Copier après la connexion

Ce qui précède est ce que j'ai compilé pour vous, j'espère qu'il vous sera utile à l'avenir.
(或者
@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>
)
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!