Si vous avez travaillé avec Vue.js et SASS (ou SCSS à partir de maintenant), vous avez peut-être rencontré ce problème très courant : vous avez des variables SCSS dans un fichier que vous souhaitez mettre à la disposition de vos composants Vue.
La bonne nouvelle est que Vue CLI facilite incroyablement la prise en charge de l’écriture SCSS, et avec les composants à fichier unique de Vue, vous pouvez simplement ajouter lang="scss" à la <style> bloc (docs).
La mauvaise nouvelle est que pour utiliser vos variables impertinentes (ou mixins et fonctions), vous devez manuellement @import dans le bloc de style de chaque composant. Au fur et à mesure que votre application grandira, vous vous rendrez vite compte à quel point ce processus est douloureux.
<style lang="scss">
@import '@/path/to/variables.scss'
/** ... */
</style>Ne serait-il pas agréable de pouvoir fournir ces fichiers SCSS fonctionnels globalement sans avoir à les importer manuellement ? Bonne nouvelle, vous pouvez !
Vue CLI 4
- Créez un fichier appelé vue.config.js (si vous n’en avez pas déjà un)
- Ajoutez les lignes suivantes :
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: `@import "@/assets/_shared.scss";`,
},
},
},
};Notez que si vous mettez à niveau un projet à partir de Vue CLI 3, vous pouvez rencontrer le problème :
Sass Loader has been initialised using an options object that does not match the API schema.
Dans ce cas, vous pouvez avoir un fichier de configuration obsolète. Voir la section suivante pour Vue CLI 3 concernant le sass-loader versions.
Vue CLI 3
- Créez un fichier appelé vue.config.js (si vous n’en avez pas déjà un)
- Ajoutez les lignes suivantes :
module.exports = {
css: {
loaderOptions: {
sass: {
data: `@import "@/assets/_shared.scss";`,
},
},
},
};Mettre à jour: Si vous avez mis à niveau sass-loader, vous pouvez rencontrer un problème :
Sass Loader has been initialised using an options object that does not match the API schema.
La solution est de remplacer data dans les options ci-dessus avec prependData pour la version 8, et additionalData pour la version 9.
Vue CLI 2
- Ouvrez le fichier appelé
/build/utils.js - Trouvez la ligne contenant
scss: generateLoaders('sass') - Remplacez-le par ce qui suit :
scss: generateLoaders("sass").concat({
loader: "sass-resources-loader",
options: {
resources: path.resolve(__dirname, "./src/_shared.scss")
}
})Choses à garder à l’esprit
Les deux méthodes ci-dessus supposent que vous stockez votre Sass partagé dans un fichier à /src/_shared.scss. Si votre projet utilise un nom de fichier ou un dossier différent, ajustez en conséquence.
Ces fichiers seront importés et disponibles pour chaque composant que vous écrivez, ce qui est idéal pour des choses comme les variables, les fonctions ou les mixins, mais vous devez éviter toute règle CSS réelle. L’ajout de règles CSS à vos fichiers Sass partagés importera ces règles dans tous composant et gonfler votre projet. Pour les règles CSS globales, créez un fichier séparé et importez-le plutôt dans votre fichier principal App.vue.
Merci beaucoup d’avoir lu. Si vous avez aimé cet article, merci de le partager, et si vous voulez savoir quand je publierai d’autres articles, Suis moi sur Twitter. À votre santé!