Skip to content

@bem-react/pack: support relative imports #598

Description

@Firnis

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

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.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions