Importation de plusieurs fichiers SCSS

Question

Je suis en train d'importer plusieurs fichiers SCSS dans mon projet vue2 mais je reçois des erreurs sur la compilation - je soupçonne que cela est possible, sa juste ma mise en œuvre est mal ...

Mon « principal. SCSS de fichier est importé dans 'index.js' en utilisant la ligne suivante:

import './styles/main.scss' 

Puis, dans mon 'main.scss' fichier que je donne les résultats suivants:

@import "./base.scss";// color pallete 
@import "./variants.scss"; //variant colors using primary colors from base.scss 

'base.scss' ressemble lik e les éléments suivants:

$slim-color-brand-orange: #e87820; 
$slim-color-brand-blue: #004a79; 
$slim-color-brand-charcoal: #595a59; 

'variants.scss' se présente comme suit:

$slim-color-brand-orange-light: lighten($slim-color-brand-orange, 15%); 
$slim-color-brand-blue-light: lighten($slim-color-brand-blue, 15%); 
$slim-color-brand-charcoal-light: lighten($slim-color-brand-charcoal, 15%); 

Cependant l'erreur que je reçois présente comme suit:

Undefined variable: "$slim-color-brand-light-blue-l5" 

Voici un exemple de la façon dont j'utilise les variables:

background-color: $color-error-background; 

Quelqu'un peut-il me dire ce que je fais mal? - Merci d'avance;)

Answer 1

Cela devrait fonctionner tant que votre couleur de fond: $ color-error-background est dans votre fichier main.scss, après l'instruction import.

La base et les variantes contiennent des variables. Tout fichier scss qui les importera pourra accéder à ces variables.

Je pense que le problème peut être l'importation dans index.js.