С приходоим ES7 в JS пришли import-ы и export-ы. Жить стало веселее, и… сложнее. Появилось много заморочек и вообще новых проблем. Одна из таких проблем выглядит так: import some from …/…/…/…/…/some. Знакомая ситуация?
Обычно её в случае webpack-а решают при помощи модуля module-resolver. Он позволяет в .babelrc (или где вы держите конфигурацию) указывать регулярные выражения для автозамены, а также добавляет поддержку root-записей. Скажем с ним можно указать import actions from ‘@actions/header`’, где @actions`` будет алиасом к какому-нибудь пути в вашем проекте.
Дальше встаёт вопрос инструментов. А как на это должен реагировать редактор? Как он узнает, что теперь пути в import-ах устроены хитрее. Что делать с линтингом? К счастью, для eslint есть такой плагин: eslint-plugin-import. С редакторами ситуация может быть сложнее.
Хорошо, а что делать с SCSS\Sass? Нормальных рабочих решений с наскоку мне найти не удалось. Но как оказалось, всё можно решить относительно просто. В настройках webpack для sass-loader-а можно указать настройки. Они будут переданы как есть в пакет node-sass. А вот он, оказывается, достаточно гибкий. Если там указать метод importer, то можно навязать свою логику обработки @import-ов. Пример:
{ loader: 'sass-loader', options: { sourceMap: true, url: false, importer: url => ( { file: url .replace(...) .replace(...) .replace(...), }), }, }
Либо даже выцепить ваши настройки прямо из настроек в .babelrc.
