Создал приложение через create-react-app
Как мне добавить алиасы, чтобы, например в sass
вместо
@import "../../../../variables"
писать
@import "@variables"
И по такому же принципу импортировать компоненты
Для алиассов в 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-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 способа его изменить:
Использовать npm run eject
, но это плохая практика и к ней стоит прибегать лишь в крайнем случае. Подробнее тут
Использовать react-app-rewired, который позволяет делать надстройки над базовым конфигом, без использования eject
. Подробнее тут и в этом видео
Не забывайте заменять module.exports = {
на module.exports = function override(config, env) {
при использовании react-app-rewired
eject