Explication détaillée de l'utilisation de vue2+less

Cette fois, je vais vous apporter une explication détaillée de l'utilisation de vue2+less. Quelles sont les précautions lors de l'utilisation de vue2+less. Voici des cas pratiques, jetons un oeil.

Donc, utiliser less dans vue est très simple. Il vous suffit d'installer less, moins-loader

Steps

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

If If. l'installation est réussie, vous pouvez utiliser moins 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

moins utilisé dans vue

Tout d'abord, le développement de vue L'environnement 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

Deuxième étape :

Modifiez le fichier webpack.config.js, configurez le chargeur pour charger les dépendances et activez-le pour prendre en charge less externes. Ajoutez

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

au code d'origine. L'installation est maintenant pratiquement terminée. puis utilisez-le avec style Vous pouvez écrire moins de code en ajoutant lang="less" à la balise (ajouter scoped à la balise style signifie qu'il n'est valable que dans cette portée)

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

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

JS réalise la fonction d'échange de listes gauche et droite

Explication détaillée des étapes à suivre pour revenir à la page précédente depuis la page de partage d'applet

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!