0

Как использовать переменные в компонентах. По разному менять пути? где-то будет ./../variables.scss, а в другом месте ./../../../variables.scss
http://prntscr.com/mkm63o
Есть способ почище?

1

2 ответа 2

1

Если у вас webpack, то воспользуйтесь resolve, тогда вы сможете сделать пути к файлам абсолютными, а не относительными.

Почитать можно тут

6
  • Сказано же create-react-app, зачем отвечать про вебпак? 14 фев 2019 в 6:11
  • @AlexandrTovmach а там не вебпак? 14 фев 2019 в 8:38
  • @ИльяПаймушкин Вебпак, но у вас нет доступа к его конфигурации 14 фев 2019 в 8:43
  • @AlexandrTovmach есть же eject. И тогда будет доступ к конфигурации. 14 фев 2019 в 8:58
  • 2
    Ну я предложил просто, вопрос был какие есть варианты. Мы же не знаем что человек хочет получить в итоге. 14 фев 2019 в 9:12
0

Вариант №1
Если все стили находятся в одной папке /styles используйте файлы сборщики, чтобы импортировать их единожды:

styles/index.scss

@import "./constants.scss";
@import "./mixins.scss";
@import "./reset.scss";

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./styles/index.scss";

ReactDOM.render(<App />, document.getElementById("root"));

В таком случае Вам не понадобится импортировать переменные стилей в каждый файл отдельно.

Вариант №2
В случае если файлы стилей находятся в папке с каждым компонентом отдельно, и нужно импортировать общие переменные в них, можно использовать переменные окружения:

.env

SASS_PATH=src

любой файл со стилями

@import styles/variables.scss
6
  • А если в папке с компонентом лежит его scss файл, то как быть?
    – stiv
    14 фев 2019 в 9:28
  • @stiv Добавил пример для такой структуры 14 фев 2019 в 13:31
  • Где добавить данную переменную? можете скинуть какое-нибудь руководство, сложно соориентироваться
    – stiv
    15 фев 2019 в 7:43
  • @stiv на рутовом уровне проекта создаешь файл .env, и в него добавляешь переменную 15 фев 2019 в 7:51
  • Ошибка File to import not found or unreadable: styles/variables 1 создал файл, прописал пути prntscr.com/mle5w2 2 структура prntscr.com/mle6gu
    – stiv
    15 фев 2019 в 8:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.