@bem-react/pack: support relative imports
- Dominant language
- TypeScript
- Stars
- 450
- Forks
- 69
- PR merge metrics
- No merged PRs in 30d
Description
Example project:
**src/components/Test/Test.scss**
```
@import '../../../node_modules/@my-company/design/constants.scss';
.Test {
background-color: $test-color;
width: 100px;
height: 100px;
background-image: url('../../../node_modules/@my-company/icons/icon.svg');
}
```
**src/components/Test/Test.tsx**
```
import { createElement } from 'react';
import './Test.scss';
export const Test = () => {
return createElement('div');
};
```
**src/components/Test/index.ts**
```
export * from './Test';
```
got error: `Error: Failed to find '../../../node_modules/@my-company/design/constants.scss'
in [
/Users/firnis/projects/pack-example
]`
This problem can be fixed by providing filepath to postcss processor [here](https://github.com/bem/bem-react/blob/master/packages/pack/src/plugins/CssPlugin.ts#L64)
With fixed CssPlugin build is working.
But now we have problem when we try to use our component.
**dist/esm/components/Test/Test.css**
```
.Test {
background-color: #000;
width: 100px;
height: 100px;
background-image: url('../../../node_modules/@my-company/icons/icon.svg');
}
```
There is no such path `./dist/node_modules/`
To fix this we should change path for esm directory in TypeScript plugin. We can add optional config param `esmOutput`.
Contributor guide
Assessment
This issue has not been assessed yet.