Explication détaillée des étapes de définition des styles globaux dans Vue2.0

Cette fois, je vais vous apporter une explication détaillée étape par étape de la façon de définir des styles globaux dans Vue2.0 Quelles sont les précautions et quels sont les cas pratiques ci-dessous ? levez-vous et jetez un oeil.

La définition des styles globaux pour Vue nécessite plusieurs étapes (si c'est impertinent, changez simplement moins en sass)

Première étape : Ajoutez le code suivant

dans main.js dans le répertoire src, c'est-à-dire

require('!style-loader!css-loader!less-loader!./common/less/index.less')

fichier d'entrée

Vous pouvez écrire ainsi dans la version 1.0 de Vue, mais cela ne fonctionne pas dans la version 2.0. Une erreur sera signalée indiquant une erreur d'analyse

require('./common/less/index.less')

. Deuxième étape : Configurez le module webpack.base.conf.js dans le répertoire build Il vous suffit d'ajouter deux modules sous les règles

module.exports = {
 module: {
 rules: [
  {
  test: /\.less$/,
  loader: 'style-loader!css-loader!less-loader'
  },
  {
  test:/\.css$/,
  loader:'css-loader!style-loader',
  }
 ] 
 }  
}

. Étape 3 : Si une erreur est signalée, vous n'avez peut-être pas installé les dépendances ci-dessus. Vous devez ajouter des dépendances

au fichier package.json à la racine. annuaire.

Étape 4 : Exécutez la commande dans la fenêtre de commande pour installer les dépendances

npm install

Linux (ubuntu, deepin), le système Mac OS peut indiquer que l'autorisation est insuffisante et que vous devez obtenir l'autorisation. Il vous suffit ensuite d'obtenir l'autorisation devant

sudu npm install

. Si vous devez en utiliser moins plus tard, ajoutez simplement l'attribut lang au style

<style></style>

S'il existe de nombreux fichiers publics, vous pouvez les mettre tous dans un seul fichier et implémenter des styles globaux pour plusieurs fichiers de styles via des liens de fichiers publics

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour en savoir plus. informations passionnantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Comment element-ui implémente la réutilisation des composants de table

Explication détaillée de l'utilisation de la portée de js

JS+canvas pour créer une animation de rotation

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!