Maison > interface Web > js tutoriel > Une brève discussion sur les différentes méthodes d'introduction des styles less, sass et css dans les composants à fichier unique de Vue-cli

Une brève discussion sur les différentes méthodes d'introduction des styles less, sass et css dans les composants à fichier unique de Vue-cli

亚连
Libérer: 2018-05-30 16:18:14
original
2508 Les gens l'ont consulté

Ci-dessous, je partagerai avec vous une brève discussion sur les différentes méthodes d'introduction des styles less, sass et css dans les composants à fichier unique Vue-cli. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

vue-cli a des configurations sass et lass intégrées. Si nécessaire, téléchargez simplement deux modules directement et webpack utilisera automatiquement le chargeur approprié pour les traiter en fonction de l'attribut lang.

Si vous devez utiliser Sass, installez :

npm install node-sass --save-dev 
npm install sass-loader --save-dev
Copier après la connexion

Si vous devez en utiliser moins, installez :

npm install less --save-dev 
npm install less-loader --save-dev
Copier après la connexion

L'écriture en ligne de Sass :

<style lang="sass" scoped> 
 //sass样式 
</style>
Copier après la connexion

L'écriture en ligne de moins :

<style lang="less" scoped> 
 //less样式 
</style>
Copier après la connexion

L'écriture couplée en ligne de CSS :

<style lang="css" scoped> 
 //css样式 
</style>
Copier après la connexion

Rédaction de citation de Sass :

<style lang="sass" src="./index.sass"></style>
Copier après la connexion

Rédaction de citation de moins :

<style lang="less" src="./index.less"></style>
Copier après la connexion

Comment citer du CSS :

<style lang="css"> 
   @import &#39;./index.css&#39; 
</style> 
 或者 
<style lang="css" src="./index.css"></style>
Copier après la connexion

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Angular utilise un filtre majuscules/minuscules pour implémenter un exemple de fonction de conversion de casse des lettres

Angular utilise la directive d'événement d'opération ng - Exemple de clic pour transmettre plusieurs paramètres

Code JavaScript pour implémenter la fonction d'aperçu de téléchargement des fichiers txt

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