Vue js component css dynamique

Bonjour,

J'essaie de mettre en place un UI KIT avec Vue js.
Dans l'idéal je veux un fichier de config qui contiendra du style que j'importerai globalement dans une app Vue.

Mon fichier config:

export const styles = {
  'mainColor': 'red',
  'secondaryColor': 'yellow'
}

Mon fichier vue js:

<template>
  <h1>Hello {{ name }} !</h1>
</template>
<script>
import { styles } from './config.js';
export default {
  props : {
    name: String
  }
}
</script>
<style scoped>
  h1{
    color: `${styles.mainColor}`
  }
</style>

J'obtiens une erreur dans le css. J'aimerais pouvoir appeler mon fichier config dans le CSS de mon component. Mon fichier config serait unique pour chaque projet. Sinon, dois-je utiliser SASS. J'aurais besoin de gérer le responsive également. Le but est de créer des components est de les passer des configurations (comme la couleur, font-size, etc....) et de les utiliser dans mes intégrations (je travaille sur des fichiers .php). Cela me permettrait de gagner en productivité. Et avec vue je peux placer mes components (presque) comme des balises html (<component></component>).

Aurais-vous des suggestions ? Dois-je utiliser un autre outil que Vue ? Si oui, lequel ? Merci.

Vue c'est bien

Par contre (à mon humble avis) j'utiliserais plutôt Sass/scss pour déclarer des variables de style dans un fichier global, c'est tout de même conçu pour cela plutôt que de passer par JS. Il y aura l'avantage d'une meilleure validation syntaxique.

Il y a plusieurs moyens de l'inclure (à tester, selon les versions et modules installés)

- Dans vue.config.js

module.exports = {
    sourceMap: true,
    loaderOptions: {
      sass: {
        additionalData: `
          @import "@/assets/css/variables.scss";
        `
      }
    }
  },...

- Dans App.vue (ne pas oublier l'attribut lang="sass" et d'installer les dépendances avec npm : sass + sais-loader

<style lang="sass">
  @import './assets/css/variables.scss';
</style>

- Dans main.js je ne pense pas qu'il soit possible d'utiliser import car si c'est du Sass cela doit être interprété/compilé au préalable

import './assets/css/variables.css';

@Rodolphe

Merci pour la réponse.
J'aime bien Vue aussi mais je pense qu'il est 'over-kill' pour mon projet.
Le but est de créer un ui-kit de préférence paramétrable que je puisse utiliser dans chaque projet. Je sais que la charte graphique sera unique mais si je peux 'componentaliser' 20-30% des éléments, se serait pas mal.
J'ai donc décidé de me tourner vers sass, tout simplement.
J'ai un fichier config.scss, unique à chaque projet. Je modifie la valeur des variables. Les noms de variables ne changent pas parce qu'elles sont utilisés par le html.

config.scss

$h1-color: red;
$h2-color: blue;
$h3-color: pink;
$a-button-color: violet;

$pt: 10px;
$pr: 10px;
$pb: 10px;
$pl: 10px;
$px: 10px;

styles.scss

@import "./config";

.co-h1 {
  color: $h1-color;
}

.co-h2 {
  color: $h2-color;
}

.co-h3 {
  color: $h3-color;
}

.co-a-button {
  color: $a-button-color;
  padding: $px;
  border: 1px solid currentColor;
  text-decoration: none;
}

index.php

<?php include('./inc/header.php') ?>

<h1 class='co-h1'>Test</h1>
<h2 class='co-h2'>Toto</h2>
<a class='co-a-button' href='#'>Hello</a>

<?php include('./inc/footer.php') ?>

C'est beaucoup plus simple ainsi.
Ce n'est pas parfait mais l'idée est là.
Si quelqu'un a des idées pour perfectionner le UI-KIT maintenant que vous comprenez ma vision, je suis à l'écoute.