Eine kurze Diskussion über die verschiedenen Methoden zur Einführung von Less-, Sass- und CSS-Stilen in Vue-cli-Einzeldateikomponenten

Jetzt werde ich mit Ihnen eine kurze Diskussion über die verschiedenen Methoden zur Einführung von Less-, Sass- und CSS-Stilen in Vue-cli-Einzeldateikomponenten teilen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.

vue-cli verfügt über integrierte Sass- und Lass-Konfigurationen. Laden Sie bei Bedarf einfach zwei Module direkt herunter, und Webpack verwendet automatisch den entsprechenden Loader, um sie basierend auf dem Lang-Attribut zu verarbeiten.

Wenn Sie Sass verwenden müssen, installieren Sie:

npm install node-sass --save-dev 
npm install sass-loader --save-dev

Wenn Sie weniger verwenden müssen, installieren Sie:

npm install less --save-dev 
npm install less-loader --save-dev

Inline-Schreiben von Sass:

<style lang="sass" scoped> 
 //sass样式 
</style>

Inline-Schreiben von less:

<style lang="less" scoped> 
 //less样式 
</style>

Inline-Schreiben von css:

<style lang="css" scoped> 
 //css样式 
</style>

Sass-Referenzschreiben:

<style lang="sass" src="./index.sass"></style>

Weniger Referenzschreiben:

<style lang="less" src="./index.less"></style>

CSS-Referenzschreiben:

<style lang="css"> 
   @import &#39;./index.css&#39; 
</style> 
 或者 
<style lang="css" src="./index.css"></style>

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Angular verwendet den Filter Groß-/Kleinschreibung, um ein Beispiel für eine Funktion zur Umwandlung von Groß- und Kleinschreibung zu implementieren

Angular verwendet die Operation-Event-Direktive ng - Klicken Sie hier, um ein Beispiel für mehrere Parameter zu übergeben

JavaScript-Code zur Implementierung der Upload-Vorschaufunktion von TXT-Dateien

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über die verschiedenen Methoden zur Einführung von Less-, Sass- und CSS-Stilen in Vue-cli-Einzeldateikomponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!