Как использовать переменные в компонентах. По разному менять пути? где-то будет ./../variables.scss
, а в другом месте ./../../../variables.scss
http://prntscr.com/mkm63o
Есть способ почище?
-
Adding a Sass Stylesheet in Create React App– simaksisCommented 21 дек. 2021 в 11:02
Добавить комментарий
|
2 ответа
Если у вас webpack
, то воспользуйтесь resolve
, тогда вы сможете сделать пути к файлам абсолютными, а не относительными.
Почитать можно тут
-
Сказано же
create-react-app
, зачем отвечать про вебпак? Commented 14 февр. 2019 в 6:11 -
-
@ИльяПаймушкин Вебпак, но у вас нет доступа к его конфигурации Commented 14 февр. 2019 в 8:43
-
@AlexandrTovmach есть же eject. И тогда будет доступ к конфигурации. Commented 14 февр. 2019 в 8:58
-
2Ну я предложил просто, вопрос был какие есть варианты. Мы же не знаем что человек хочет получить в итоге. Commented 14 февр. 2019 в 9:12
Вариант №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
-
А если в папке с компонентом лежит его scss файл, то как быть?– stivCommented 14 февр. 2019 в 9:28
-
-
Где добавить данную переменную? можете скинуть какое-нибудь руководство, сложно соориентироваться– stivCommented 15 февр. 2019 в 7:43
-
@stiv на рутовом уровне проекта создаешь файл .env, и в него добавляешь переменную Commented 15 февр. 2019 в 7:51
-
Ошибка File to import not found or unreadable: styles/variables 1 создал файл, прописал пути prntscr.com/mle5w2 2 структура prntscr.com/mle6gu– stivCommented 15 февр. 2019 в 8:52