0

Создал приложение через create-react-app
Как мне добавить алиасы, чтобы, например в sass вместо

@import "../../../../variables"

писать

@import "@variables"  

И по такому же принципу импортировать компоненты

1 ответ 1

2
+50

JS

Для алиассов в JS, думаю, вам нужно эта документация и этот вопрос

Пример вашего конфига для JS

const path = require('path');
module.exports = {
    ...
    resolve: {
        extensions: ['.js', '.jsx'],
        alias: {
            '@variables': path.resolve('путь.до/папки1'),
        }
    }
    ...
}

Даст возможность делать такой импорт

import '@variables/style.scss';

При условии, что файл style.scss находится внутри путь.до/папки1

SASS

Для SASS же можно воспользоваться опциями sass-loader

Подробнее об этом тут и тут

Пример вашего конфига для SASS

const path = require('path');
module.exports = {
    ...
            {
                test: /\.scss$/,
                loader: 'sass-loader',
                options: {
                    includePaths: ['путь/до/папки2']
                        .map((d) => path.join(__dirname, d))
                        .map((g) => glob.sync(g))
                        .reduce((a, c) => a.concat(c), [])
                }
            }
    ...
}

Даст вам возможность делать такой импорт в .scss файлах

@import '@variables/style';

При условии, что файл style.scss находится внутри путь/до/папки2/@variables


Заметьте, что с JS можно ппросто сделать алиас и указать путь, при том папка может называться по-разному

Однако с SASS вам нужно будет иметь название папки именно @variables, а лоадеру вы просто укажете кастомный путь до неё

Изменение конфига

Спасибо Grundy за замечание

По дефолту create-react-app прячет от нас конфиг, что бы мы его не трогали, но есть как минимум 2 способа его изменить:

  1. Использовать npm run eject, но это плохая практика и к ней стоит прибегать лишь в крайнем случае. Подробнее тут

  2. Использовать react-app-rewired, который позволяет делать надстройки над базовым конфигом, без использования eject. Подробнее тут и в этом видео


Не забывайте заменять module.exports = { на module.exports = function override(config, env) { при использовании react-app-rewired

4
  • Хорошо расписал 👍 13 окт 2020 в 18:34
  • @Даниил спасибо :)
    – ccvhd
    13 окт 2020 в 18:36
  • При использовании react-create-app - конфиг вебпака скрыт внутри, поэтому приведенные варианты не применимы без выполнений eject
    – Grundy
    14 окт 2020 в 6:16
  • @Grundy да, не учёл
    – ccvhd
    14 окт 2020 в 7:30

Ваш ответ

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

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