Как изменить начальный путь из корня проэкта?

Question

[Cyberial Syntwaiser]

Привет тостята, столкнулся вот с такой проблемой

import HeaderLogout, {ReactComponent as Logout} from '../../../../../img/icons/sign-out.svg';

Я понимаю что это не правильно, я строю путь до svg исходя из компонента в котором я нахожусь, как искать из корня проэкта? Что гуглить? Могут ли быть проблемы с такими путями когда сайт собирается в цело и натягивается на огромный х....... сервер? Реальные проэкты еще не собирал, прошу помощи :)
Если нужно будет показать package.json or webpack.conf.... То я моментально!
Спасибо ребят за вашу помощь!

Answer 1

[Ice]

указать alias в webpack

resolve: {
        alias: {
            '~': path.resolve(__dirname, 'src'),
            '~i': path.resolve(__dirname, 'src/images/img/icons'),
        }
    },

В проекте подключать как:
import Img from '~i/sign-out.svg';

Comments

[Cyberial Syntwaiser]

Ты просто взорвал банку, спасибо :)

[Cyberial Syntwaiser]

А как использовать тоже самое для Sass?
Я возле каждого компонента прописываю sass,scss стили, и получается что нужно для каждого файла подключать мои @mixin и переменные в виде - $fz50h: 50px; которые лежат в отдельном файле, как подключить это для проэкта? Чтоб в каждом файле стилей не прописывать подобную конструкцию?

@import '../../css/base/typography'
@import '../../css/base/mixin'

Answer 2

[Alexander Dozmorov]

Предлагаю посмотреть на https://webpack.js.org/configuration/resolve/#reso...

Это поможет обозначить папку src как ту, в которой можно искать модули. Тем самым, можно будет начинать импорт с имени папки/файла, находящихся в src

Comments

[Cyberial Syntwaiser]

В очередной раз понимаю что плохо то что я не смотрю всю документацию того, чем сам пользуюсь, но начинающему хочется видеть результат и чтоб как можно было меньше зубрить, по этому здесь табу :)
Спасибо за помощь!