Comment utiliser SCSS avec les composants de fichier unique Vue.js

Découvrez comment activer SCSS dans vos composants Vue.js

En utilisant leVue CLIvous pouvez activer les «préprocesseurs CSS» et vous pouvez choisir celui à activer:

Vue CLI

Si vous utilisez un projet non basé sur Vue CLI, ou un projet qui a été initialisé à l'aide de Vue CLI mais que vous n'avez pas ajouté la prise en charge du préprocesseur CSS, vous pouvez l'ajouter plus tard en utilisant:

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

À l'intérieur des composants de votre application, vous pouvez utiliser

<style lang="scss">
...
</style>

et ajoutez votre code SCSS là-dedans.

Si vous souhaitez conserver votre code SCSS dans un fichier externe, vous pouvez le faire, et simplement l'importer dans la partie script de votre composant:

<script>
import '../public/style.scss'

//… </script>

Téléchargez mon gratuitManuel de Vue


Plus de tutoriels vue: