Каков наилучший способ обработки общего scss файла в реакции?
Предполагая, что у меня есть следующий файл
// variables.scss
$primary: rgb(1,2,3);
$secondary: rgb(2,3,4);
И у меня есть несколько компонентов, которым нужно использовать эти цвета.
Конечно, каждый компонент имеет свой собственный файл scss, и я импортирую этот файл в файл компонента jsx. Нужно ли мне import этот файл несколько раз в каждом компоненте, которому нужны эти переменные?
Если я сделаю import этот файл в каждом компоненте scss, файл webpack с sass-loader знает, как его обработать и импортировать один раз?
UPDATE:
Чтобы лучше объяснить вопрос, это моя проблема:
У меня есть компонент А
это файл jsx
// A.jsx
import React from 'react';
import './A.scss'
//more code here...
A scss выглядит так:
//A.scss
import '../../variables.scss';
и у меня также есть компонент B
это jsx файл
// B.jsx
import React from 'react';
import './B.scss'
B scss выглядит так:
//B.scss
import '../../variables.scss';
Теперь, как вы видите, A.scss и B.scss импортируют переменные, это правильный путь? Если да, webpack sass-loader не может импортировать один и тот же файл дважды? Если нет, то каков правильный путь?