При стилизации компонента React не видны scss переменные подключенные модулем к index.js, в чем может быть проблема?

Область видимости переменных только почему-то в файле, куда они импортированы.

А у тебя раньше работало иначе? У меня ни в одном проекте по-другому не работало

При стилизации компонента React не видны scss переменные подключенные модулем к index.js, в чем может быть проблема?

А пробовал style.scss в компонент App импортировать, а не в index.js ?

При стилизации компонента React не видны scss переменные подключенные модулем к index.js, в чем может быть проблема?

Сергей, на всякий случай спрошу - имя переменной и там и там верно указано?

При стилизации компонента React не видны scss переменные подключенные модулем к index.js, в чем может быть проблема?

Я понял походу

В строках импорта у тебя абсолютный путь
@import "/src/base/styles/variables";

Поменяй на относительный
@import "../../base/styles/variables";

Почему не работают axios-запросы во Vue?

Уже делал. Работать начало только когда поместил кнопку над всеми компонентами, принимающими props. Пока не могу понять, почему так

Как сделать свечение SVG-иконки?

В общем, самое близкое, что удалось реализовать - это скопировать svg в public, поменять всем цвет заливки на белый (fill: #ffffff), и вставлять картинкой, прикрутив drop-shadow (спасибо Ankhena)

<img src={`svg/${props.name}.svg`} className={styles.glowingIcon} />

Как сделать свечение SVG-иконки?

shsv382, еще один минус вставки через импорт как компонент

import { ReactComponent as YourSvg } from '../../svg/add-user.svg';
// ...
<YourSvg className={styles.glowingIcon} />

заключается в том, что для всех SVG нужно вручную переделывать цвет заливки/обводки, т.к. не все они белые

Как сделать свечение SVG-иконки?

Ankhena, за drop-shadow спасибо, но тогда вопрос другой: как сделать это более декларативно? То есть, я не хочу для каждой отдельной страницы импортировать отдельно нужные SVG, я хочу сделать компонент, принимающий на входе имя SVG-иконки (либо имя файла), и возвращающий иконку со свечением

Как сделать свечение SVG-иконки?

Максим, есть множество svg-иконок, которые вставляются следующим образом
<i className="icon-add-user" />

%icon {
    display: inline-block;
    mask-position: center center;
    mask-size: 100%;
    mask-repeat: no-repeat;
    width: 24px;
    height: 24px;
    background-color: #ffffff;
}

.icon-add-user {
    @extend %icon;
    mask-image: url(../svg/add-user.svg);
}

Теперь появилась необходимость сделать иконки со свечением


Вопрос: как это реализовать в React-приложении? И как это сделать наиболее декларативным способом, чтобы просто передать в компонент имя иконки, а не делать отдельный компонент для каждой SVG (на данный момент их 30)?

Как сделать свечение SVG-иконки?

Ankhena, спасибо, конечно, но вопрос стоит "как сделать?", а не "как не надо делать?". Если у вас есть более содержательные мысли на этот счет, был бы благодарен!

Не работает роутинг на github pages. Как исправить?

HashRouter не очень хорошая штука в плане SEO, так что это подойдет только для проектов "для себя"

Как сделать onChange валидацию номера телефона на React?

Togar, по поводу маски мне сложно понять, но как вариант можно сделать несколько шаблонов. Да и в принципе это все можно упаковать в реакт-компонент со своим state, так даже проще будет.

зы: давно просто хотел эту фишку реализовать, а тут твой вопрос - как повод потренироваться немного )))

Как сделать onChange валидацию номера телефона на React?

Togar, добавь перед выводом строку
if(!content.length) e.target.value = '';

проверил на CodePen, работает

Как импортировать ApolloClient без ошибок?

Антон Горецкий, да у меня только руки дошли изучить graphql клиент

Как импортировать ApolloClient без ошибок?

Василий Банников,

"dependencies": {
    "@apollo/react-hooks": "^4.0.0",
    "apollo-boost": "^0.4.9",
    "apollo-cache-inmemory": "^1.6.6",
    "apollo-client": "^2.6.10",
    "apollo-link-ws": "^1.0.20",
    "firebase": "^9.6.8",
    "graphql": "^14.7.0",
    "graphql-tag": "^2.12.6",
    "graphql-tools": "^4.0.8",
    "react": "^16.8.6",
    "react-apollo": "^3.1.5",
    "react-dom": "^16.8.6",
    "react-redux": "7.0.3",
    "react-router-dom": "^5.3.0",
    "react-scripts": "^5.0.0",
    "react-stripe-checkout": "2.6.3",
    "redux": "4.0.1",
    "redux-logger": "3.0.6",
    "redux-persist": "5.10.0",
    "reselect": "4.0.0",
    "sass": "^1.49.9"
  },

Как найти работу, если есть скиллы, но нет опыта?

Лучший ответ

Как найти работу, если есть скиллы, но нет опыта?

Guest3302, это да, но реальные проекты дают не столько усвоение знаний, сколько опыт вылавливания и устранения багов и ошибок, а также опыт общения с людьми - коллегами по команде разработки, заказчиками и тд, а этого мне действительно не хватает

Как найти работу, если есть скиллы, но нет опыта?

mkone112, так и есть, только это в среднем - от 0 часов в неделю, когда на работе завал, до 40 часов в неделю, когда работа в карантине или был на больничном

Как найти работу, если есть скиллы, но нет опыта?

У психолога я лечу депрессию, развившуюся из полнейшего выгорания на текущей работе (вроде успешно, но это неточно)

Собственно, я поэтому и интересуюсь, как войти в новую сферу, ибо старая меня потихоньку убивает

Как найти работу, если есть скиллы, но нет опыта?

Спасибо за ответ. Я просто вообще не представляю, как это устроено. Просто задался целью за следующий год найти хорошее место во фронтэнде, но как начать - тут ступор