3
votes

Comment puis-je @extend des classes CSS externes dans un composant Vue?

Par exemple, si j'ai quelque chose comme ça dans mon composant:

@import 'path/to/orange.css'

J'obtiens une erreur qui dit

".orange-blue" n'a pas réussi à @extend ".bg-orange".

Le sélecteur ".bg-orange" est introuvable.

J'ai lu que je pouvais ajouter

<style lang="scss" scoped>
.color-blue {
  color: blue;
}

.orange-blue {
  @extend .color-blue; // This works!
  @extend .bg-orange; // .bg-orange is defined in another css file somewhere. This doens't work
}
</style>

à mon bloc de style, mais cela ne semble pas faire l'affaire ici. De plus, cela n'entraînerait-il pas la répétition du CSS pour chaque composant qui l'importe?

vue.js sass

0 commentaires

3 Réponses :

0
votes

Importez le fichier avec d'autres styles comme celui-ci

@import '../../../styles/mixins';

ou utilisez le chemin habituel

<style lang="scss" scoped>  
 @import '~styles/mixins';  

... 

</style>

0 commentaires

0
votes

Vous pouvez le faire de la manière suivante:

Créez le fichier contenant la classe que vous souhaitez étendre:

...
<style lang="scss" scoped>
.my_extended_class {
  @extend .my_class_to_extend;
}

Dans votre fichier vue.config.js que vous ajoutez ce qui suit pointant vers votre fichier:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/styles/style.scss";`
      }
    }
  }
}

Après cela, vous pouvez étendre votre composant vue sans problème:

src/styles/style.scss

.my_class_to_extend {
  backgroud-color: aqua;
}

Remarque que pour l'utiliser, vous avez toujours besoin de fichiers scss, pas de css.

0 commentaires

0
votes

En bref, vous ne pouvez pas étendre la classe css dans le fichier * .scss en important un fichier * .css brut. Le compilateur SCSS lancera une erreur SassError: Le sélecteur de cible n'a pas été trouvé .

Le moyen le plus simple est de renommer le fichier * .css référencé en * .scss. Ainsi, le résultat serait comme @import 'path / to / orange.scss'

0 commentaires