Explication détaillée des étapes pour utiliser less dans vue2

Cette fois, je vais vous apporter une explication détaillée des étapes pour utiliser moins avec vue2 Quelles sont les précautions pour utiliser moins avec vue2. Voici des cas pratiques, jetons un coup d'oeil.

Tout d'abord, laissez-moi vous expliquer que si le projet est créé en utilisant le nom du projet npm init webpack , il n'est pas nécessaire de configurer manuellement le webpack

, donc utiliser less dans Vue est très simple , il suffit de Installermoins, moins de chargeur suffit

Étapes

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

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

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

Supplément :

Comment utiliser less dans vue

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

elementUI Il est basé sur vue2

moins utilisé dans vue

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 :

Modifiez le fichier webpack.config.js et configurez le chargeur pour chargez les dépendances pour qu'elles prennent en charge les moins externes. Ajoutez

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

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 cher (ajouter la balise de style scoped 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 pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez. faites attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Transfert de liste gauche JS vers la droite

Analyse de la fonction de partage de temps JS

Explication détaillée des étapes de transmission des paramètres du tableau au contrôleur via js

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!