bem / bem/bem-react

@bem-react/pack: support relative imports

Open
#598 0 comments 0 reactions 1 assignee Claimed by @yarastqt View on GitHub
bug scope: pack
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.