Maison > Article > interface Web > 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
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
Si vous devez en utiliser moins, installez :
npm install less --save-dev npm install less-loader --save-dev
L'écriture en ligne de Sass :
<style lang="sass" scoped> //sass样式 </style>
L'écriture en ligne de moins :
<style lang="less" scoped> //less样式 </style>
L'écriture couplée en ligne de CSS :
<style lang="css" scoped> //css样式 </style>
Rédaction de citation de Sass :
<style lang="sass" src="./index.sass"></style>
Rédaction de citation de moins :
<style lang="less" src="./index.less"></style>
Comment citer du CSS :
<style lang="css"> @import './index.css' </style> 或者 <style lang="css" src="./index.css"></style>
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 :
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!